Удалить элемент, созданный с помощью jQuery

Question

Я хочу удалить и добавить наложение так часто, как хочу, но я не могу заставить js удалить элемент by js, любые идеи?

JS Fiddle Example

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

Вам нужно прикрепить обработчик щелкнуть событие $ ('# близко ') еще раз после добавления его в документ.

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

});