Supprimer les éléments onclick (y compris le bouton de suppression lui-même) avec jQuery

Je sais qu'il ya certaines questions qui ressemblent au mien, mais dans ce cas, je veux le bouton supprimer pour être supprimée et je ne sais pas comment je peux le faire.

Voici ma question;

J'ai ajouter 3 éléments avec jQuery quand un ajout bouton est cliqué.
Y compris un bouton supprimer.

Je veux que ce bouton supprimer pour supprimer soi-même et les deux autres éléments.
Le compteur devrait faire le même Id, mais je ne suis pas sûr si je l'ai fait avec jQuery.

Comment puis-je supprimer trois éléments, y compris le bouton supprimer onclick?

$(function() {
var counter = 0;

  $('a').click(function() {
  $('#box').append('<input type="checkbox" id="checkbox" + (counter) + "/>');
  $('#box').append('<input type="text" id="t1" + (counter) + "/>');
  $('#box').append('<input type="button" value="." id="removebtn" + (counter) + "/>');
  $("#box").append("<br />");
   $("#box").append("<br />");
     counter++;
     });

$('removebtn').click(function() {
remove("checkbox");

});
});

je vous remercie à l'avance

source d'informationauteur Opoe

  1. 18

    ma suggestion serait comme ça.

    $(function () {
    var counter = 0;

    $('a').click(function () {
        var elems = '<div>'+
              '<input type="checkbox" id="checkbox"' + (counter) + '" class="item"/>' + 
              '<input type="text" id="t1"' + (counter) + '"/>' +
              '<input type="button" class="removebtn" value="." id="removebtn"' + (counter) + '"/>' +
        '</div>';
        $('#box').append(elems);
        $("#box").append("<br />");
        $("#box").append("<br />");
        counter++;
    });

    $('.removebtn').live(function () {
        $(this).parent().remove();   
    });
});

    simple démo

  2. 5

    Supposons que votre bouton supprimer l'id est #removebtn1234. Puis 

    $("#removebtn1234").click(function(){
    $(this).remove();
});

    devrait fonctionner

    Mais pour en faciliter la manipulation sur plusieurs articles, je vous suggère de modifier à la suivante:

    $('a').click(function() {
  $('#box').append('<input type="checkbox" data-id="' + counter + '"/>');
  $('#box').append('<input type="text" data-id="' + counter + '"/>');
  $('#box').append('<input type="button" value="." class="removebtn" data-id="' + counter + '"/>');
  $("#box").append("<br /><br/>");
  counter++;
});

$(".removebtn").click(function(){
   var id = $(this).data("id");
   $("*[data-id=" + id + "]").remove();
});
  3. 4

    Voici une solution (ce qui semble messier qu'il ne le devrait, mais je ne peux pas mettre mon doigt sur elle).

    $(function() {
    var counter = 0;

    $('a').click(function() {

        var checkBox = $('<input type="checkbox" id="checkbox' + (counter) + '"/>'),
            textBox = $('<input type="text" id="t1' + (counter) + '"/>'),
            removeButton = $('<input type="button" value="." id="removebtn' + (counter) + '"/>'),
            containerDiv = $("<div />");

        removeButton.click(function(e) {
            e.preventDefault();
            containerDiv.remove();
        });

        containerDiv
            .append(checkBox)
            .append(textBox)
            .append(removeButton);

        counter++;

        $("#box").append(containerDiv);
    });
});

    Dans cette solution, j'ai créer une variable de jQuery référence. De cette façon, nous pouvons appeler les choses comme checkBox.remove() et il fera référence seulement que la case à cocher (sans essayer de travailler sur l'URL).

    J'ai modifié un peu et enlevé le <br /> balises et enveloppé le tout dans une <div />. De cette façon, vous pouvez simplement supprimer le div conteneur et tous les éléments vont.

    Exemple: http://jsfiddle.net/jonathon/YuyPB/