Question

在我的代码中，我有img个rembtn个元素。我希望每个图像都能在点击时销毁其父div（及其所有内部内容）。所以我有这个：

$('.rembtn').on('click', function() {
    $(this).parent('div').remove();
});

我的JavaScript控制台没有记录错误;但是，当我点击图像时没有任何反应。

复制步骤：打开http://jaminweb.com/YoutubePlaylist.html并单击红色X.这应该与左侧的文本框一起销毁。

关于什么是错的任何想法？

Answer 1

您需要将事件处理程序放在body上，因为您要动态添加元素，如下所示：

$("body").on("click", ".rembtn", function() {
    $(this).closest("div").remove();
});

使用$(".rembtn")要求元素在加载时已经在页面上。在上面的代码示例中，事件处理程序实际上在body上，然后单击指定的元素将冒泡到触发该函数的该级别。

有关更多信息以及对事件委派的更详尽说明，请查看以下链接：http://learn.jquery.com/events/event-delegation/

Answer 2

Laymanje的回答是正确的，但您可能需要考虑使用

$('.rembtn').on('click', function()
{
     $(this).closest('div').remove();
});

使用＆＃34;最近＆＃34;而不是＆＃34;父母＆＃34;。这样，如果您需要编辑标记，则可以更改选择器，而不必计算父项。

编辑：详细说明，＆＃34;父母＆＃34;赢得工作是因为jQuery父函数只返回直接父级。它不会检查所有祖先。最近的将通过祖先层次结构，并删除第一个＆＃34; Div＆＃34;它找到了。您应该将其更改为ID选择器，以便更安全。

$('.rembtn').on('click', function()
{
     $(this).closest('#vidplaydiv').remove();
});

Answer 3

尝试使用$（this）.parent（）。remove（）;没有'div'告诉jQuery你的意思是它是直接的父母。如果你需要提升多个级别，你可以再次链接.parent（）。

实施例

$(this).parent().remove();

或可能的

$(this).parent().parent().remove();

取决于您的HTML

Answer 4

由于您正在动态创建元素，请尝试使用此代码：

$(document).on('click', ".rembtn", function() {
    $(this).parent('div').remove();
});

Answer 5

您正在jQuery的文档就绪侦听器之外绑定click事件。看看如果你改为

会发生什么

$(document).ready(function() { 
    $('.rembtn').on('click', function()  {
        jQuery(this).parent().remove();                   
    }); 
});

Answer 6

如果你想让你的每个rembtn图像删除它们的div，你需要调用每个（），你必须把这个代码放在$（document）.ready（function（）

中

尝试这样的事情：

$(document).ready(function() {
$(".rembtn").click(function(event) {
$(".rembtn").each(function(element) {
    $(this).parent('div').remove(); // or $(this).parent('div').html();
});
});

}

它应该有用。

JQuery函数应用于所有类并删除父div

6 个答案: