使用jQuery删除元素onclick（包括删除按钮本身）

我知道有一些问题看起来像我的，但在这种情况下，我想要删除删除按钮，我不知道我怎么能这样做。

这是我的问题;

单击追加按钮时，我使用jQuery追加3个元素。 包括删除按钮。

我想要这个删除按钮来删除它自己和其他两个元素。 计数器应该是相同的Id，但我不确定我是否用jQuery做了正确的方法。

如何删除三个元素，包括删除按钮onclick？

$(function() { var counter = 0; $('a').click(function() { $('#box').append(''); $('#box').append(''); $('#box').append(''); $("#box").append("
"); $("#box").append("
"); counter++; }); $('removebtn').click(function() { remove("checkbox"); }); }); 

先感谢您

Answer 1

我的建议是这样的。

 $(function () { var counter = 0; $('a').click(function () { var elems = '
'+ '' + '' + '' + '
'; $('#box').append(elems); $("#box").append("
"); $("#box").append("
"); counter++; }); $('.removebtn').live(function () { $(this).parent().remove(); }); }); 

简单的演示

Answer 2

假设你的删除按钮的id是#removebtn1234。 然后

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

应该管用

但是为了更容易操作多个项目，我建议您修改为以下内容：

 $('a').click(function() { $('#box').append(''); $('#box').append(''); $('#box').append(''); $("#box").append("

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

Answer 3

这是一个解决方案（它似乎比它应该更麻烦，但我不能把手指放在它上面）。

 $(function() { var counter = 0; $('a').click(function() { var checkBox = $(''), textBox = $(''), removeButton = $(''), containerDiv = $("
"); removeButton.click(function(e) { e.preventDefault(); containerDiv.remove(); }); containerDiv .append(checkBox) .append(textBox) .append(removeButton); counter++; $("#box").append(containerDiv); }); }); 

在这个解决方案中，我创建了一个jQuery引用的变量。 这样我们可以调用checkBox.remove()类的东西，它只会引用该复选框（不试图计算出URL）。

我对它进行了一些修改并删除了
标签并将所有内容包装在

。 这样你就可以删除容器div并且所有元素都将被删除。

示例： http ： //jsfiddle.net/jonathon/YuyPB/