删除使用 jQuery 创建的元素

Question

我想根据需要随时删除和添加叠加层，但我似乎无法让 js 删除由 js 创建的元素，有什么想法吗？

html

<div id="background"></div>
<button id="open">Open</button>
<div id="overlay">
    <button id="close">Close</button>
</div>

js/jQuery

$(function() {

    $('#open').click(function() {

        $('body').append('<div id="overlay"><button id="Close">Close</button></div>');

    });

    $('#close').click(function(){
        $('#overlay').remove();
    });
});

css:

#overlay{
    padding: 8px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
}

Answer 1

您需要在将 $('#close') 添加到文档后再次将处理程序附加到单击事件。

$(function() {

    $('#open').click(function() {

        $('body').append('<div id="overlay"><button id="close">Close</button></div>');

         $('#close').click(function(){
             $('#overlay').remove();
         });

    });

    $('#close').click(function(){
        $('#overlay').remove();
    });
});

点击关闭后，您将不再有附加处理程序的关闭按钮。它由 $('#overlay').remove() 代码删除。单击打开按钮后，添加了全新的#overlay 元素。它不包含旧元素的处理程序。

您可以用更少的代码实现您的目标：

https://jsfiddle.net/IAfanasov/msro2hoq/6/

$(function() {

    $('#open').click(function() {
        $('#overlay').show();
    });

    $('#close').click(function(){
        $('#overlay').hide();
    });
});

Answer 2

为什么不直接显示和隐藏呢？

$(function() {

    $('#open').click(function() {

        $('#overlay').show();

    });

    $('#close').click(function(){
        $('#overlay').hide();
    });

});

删除使用 jQuery 创建的元素

Remove element created with jQuery

html

javascript

jquery

append