Supprimer les éléments onclick (y compris le bouton Supprimer 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'Ajoute 3 éléments avec jQuery quand un bouton Ajouter 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 des Id identiques, mais je ne suis pas sûr si je l'ai fait de la bonne façon avec jQuery.
Comment puis-je supprimer trois éléments dont 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
3 réponses
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
supposons que l'id de votre bouton Supprimer est #removebtn1234. Puis
$("#removebtn1234").click(function(){
$(this).remove();
});
devrait fonctionner
mais pour faciliter la manipulation de 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();
});
Voici une solution (qui semble plus désordonnée qu'elle ne devrait, mais je ne peux pas mettre le doigt dessus).
$(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 fais une variable de la référence jQuery. De cette façon, nous pouvons appeler des choses comme checkBox.remove() et il va de 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 un <div />. De cette façon, vous pouvez simplement supprimer le div conteneur et tous les éléments aller.