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

在将文件添加到文档后，您需要附加处理程序以再次点击$（＆＃39; #close＆＃39;）的事件。

$(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();
    });
});

单击关闭后，您不再需要关闭处理程序的关闭按钮。它被$（＆＃39;＃overlay＆＃39;）删除（）代码删除。点击打开按钮后添加全新的#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创建的元素

2 个答案: