使用 jQuery 删除 onclick 元素（包括删除按钮本身）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4469059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove elements onclick (including the remove button itself) with jQuery
提问by Opoe
I know there are some questions up wich look like mine, but in this case i want the remove button to be removed as well and i dont know how i can do this.
我知道有一些问题看起来像我的，但在这种情况下，我希望删除按钮也被删除，但我不知道如何做到这一点。
Here is my question;
这是我的问题；
I append 3 elements with jQuery when an append button is clicked. Including a remove button.
单击附加按钮时，我使用 jQuery 附加 3 个元素。包括一个删除按钮。
I want this remove button to remove it self and the other two elements. The counter should make identical Id's, but i'm not sure if i did this right way with jQuery.
我希望这个删除按钮可以自行删除它和其他两个元素。计数器应该制作相同的 Id，但我不确定我是否用 jQuery 正确地做到了这一点。
How can i delete three elements including the remove button onclick?
如何删除三个元素，包括删除按钮 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");
});
});
thank you in advance
先感谢您
回答by Reigel
my suggestion would be like this.
我的建议是这样的。
$(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 demo
简单的演示
回答by xandy
Suppose your remove button's id is #removebtn1234. Then
假设您的删除按钮的 id 是 #removebtn1234。然后
$("#removebtn1234").click(function(){
$(this).remove();
});
should work
应该管用
But for easier manipulation on multiple items, I suggest you modify to following:
但是为了更容易地对多个项目进行操作，我建议您修改为以下内容：
$('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();
});
回答by Jonathon Bolster
Here's a solution (which seems messier than it should, but I can't place my finger on it).
这是一个解决方案（看起来比它应该的更混乱，但我无法将手指放在上面）。
$(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);
});
});
In this solution, I make a variable of the jQuery reference. This way we can call things like checkBox.remove()and it will reference only that checkbox (without trying to work out the URL).
在这个解决方案中，我创建了一个 jQuery 引用的变量。这样我们就可以调用类似的东西checkBox.remove()，它只会引用那个复选框（而不是试图计算出 URL）。
I have modified it a bit and removed the <br />tags and wrapped everything in a <div />. This way you can just remove the container div and all the elements will go.
我对其进行了一些修改并删除了<br />标签并将所有内容包装在<div />. 这样您就可以删除容器 div，所有元素都会消失。
Example: http://jsfiddle.net/jonathon/YuyPB/
