javascript - 在父级上删除动态添加的div会使它再次追加

JsFiddle

我正在尝试在单击td.active时动态添加div。当有人单击关闭按钮或单击其他td.active时，我希望删除动态添加的div

现在，当单击关闭按钮时，我的代码只是追加另一个div。谁能帮我解决问题。

$(function() {
    $('td.active').click(function(event){
        $(this).append('<div class="planner-modal"><div class="planner-modal-header"><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h5 class="text-center">modal heading</h5></div><div class="planner-modal-body">modal body</div><div class="caret-container"><div class="top-caret"></div><div class="bottom-caret"></div></div></div>');
    });
    $('.planner-modal-header.close').click(function(e){
        $(this).closest('planner-modal').remove();
    });
});

最佳答案

我经历了jsfiddle并修复了它。您正在尝试在动态添加的内容上调用click事件以进行查询，因此我们可以使用jQuery on方法。
我正在共享jsfiddle链接。

  $(document).on("click",'.close',function(e){

      $('.planner-modal').remove()
    });

click here to see the working jsfiddle example

谢谢

关于javascript - 在父级上删除动态添加的div会使它再次追加，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24886227/