web-dev-qa-db-fra.com

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

Je sais qu'il y a des questions qui ressemblent aux miennes, mais dans ce cas, je veux que le bouton Supprimer soit également supprimé et je ne sais pas comment je peux le faire.

Voici ma question;

J'ajoute 3 éléments avec jQuery lorsqu'un bouton d'ajout est cliqué. Y compris un bouton de suppression.

Je veux que ce bouton de suppression le supprime lui-même et les deux autres éléments. Le compteur devrait faire des identifiants identiques, mais je ne sais pas si j'ai fait de cette façon 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");

});
});

merci d'avance

jquerybuttonappend
15
Opoe

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();   
    });
});

démo simple

20
Reigel

Supposons que l'ID de votre bouton de suppression soit # removebtn1234. ensuite

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

devrait marcher

Mais pour une manipulation plus facile sur plusieurs éléments, je vous suggère de modifier comme suit:

$('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();
});
5
xandy

Voici une solution (qui semble plus compliquée qu'elle ne devrait, mais je ne peux pas y mettre le doigt).

$(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, je crée une variable de la référence jQuery. De cette façon, nous pouvons appeler des choses comme checkBox.remove() et il référencera uniquement cette case à cocher (sans essayer de trouver l'URL).

Je l'ai un peu modifié et supprimé les balises <br /> Et tout enveloppé dans un <div />. De cette façon, vous pouvez simplement supprimer le div du conteneur et tous les éléments iront.

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

4
Jonathon Bolster