Jquery Remove() 不删除选定的节点

Question

我正在制作一个简单的文件管理器，但我不知道我的代码有什么问题，我多次使用了 remove() 和/或 detach() jQuery 的函数，但这次它不会从网格的其余部分中删除选定的节点。

代码如下:

<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 ，因为按钮是动态创建的。元素在事件绑定(bind)时不存在。此外，您还需要选择 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