Question

我正在创建一个简单的FileManager，但我不知道我的代码有什么问题，我多次使用jQuery的remove()和/或detach()函数，但这次不是从网格的其余部分删除所选节点。代码如下：

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
    $(".excluir").click(function(){
        $(this).remove();
    });

    $("#novo").click(function(){
        $("#gradearquivos").append("<div class=\"miniatura\"><button class=\"excluir\">X</button></div>");
    });
});
</script>

append()工作正常，创建文件大拇指，但remove()不是！这次我做错了什么？ PS：jsFiddle 先谢谢！

Answer 1

您需要使用event delegation，因为按钮是动态创建的。事件绑定时不存在元素。您还需要选择parent('.miniatura')，否则它只会移除关闭图标而不是.miniatura div

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
    $("#gradearquivos").on('click',".excluir",function(){
        $(this).parent('.miniatura').remove();
    });

    $("#novo").click(function(){
        $("#gradearquivos").append("<div class=\"miniatura\"><button class=\"excluir\">X</button></div>");
    });
});
</script>

Fiddle Demo

Answer 2

您需要使用jQuery on() 事件委派来动态添加元素。具有类excluir的元素通过javascript添加，并且在点击绑定时不存在于DOM中。所以点击事件没有绑定。您可能需要删除被单击的按钮的父元素，该元素是类miniatura

的元素

<强> Live Demo

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

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序jQuery doc。

Jquery Remove（）无法按预期工作

2 个答案: