动态追加div并在jquery中删除相同的div

Question

I have got stuck somewhere. Expecting your help seriously.

I am trying to append divs dynamically with "id" s and remove the same div with the same "id" on click a button. Everything is working fine. When I am clicking the relevant button to append div, divs are appending with dynamic id. Problem is on removing the same div on click a "Close" button inside the appended div.

Suppose my appended divs are "Order2" and "Order3". When I click a "Close" button inside the "Order3" appended div, it is removing the same div ie"Order3", but before removing the "Order3" div if I click on the "Close" button inside the "Order2" div all the appended divs are removed. This is not expected. It is expected when I click the "Close" button inside the "Order2" div it will remove the "Order2" div.

I know I am doing silly mistake. Please help me to sort out. Thanks in advance My js Code is:

$(document).ready(function(){
  function addallTit() {
   var container = $('#addTitles');
   var inn = container.find('.app-div');

   var $id = inn.length+1;
   $id++;
$(container).append('<div id="app'+$id+'"><div class="col-md-12"><div class="app-div"><div class="closed-btn pull-right"><a href="javascript:"><i class="fa fa-times "></i></a></div> <div class="input-group" > <span id="sizing-addon2" class="input-group-addon">Order # '+ $id +'</span><input type="text" placeholder=""  class="form-control">  </div></div></div></div>');

$('.closed-btn ').click(function(e){
     e.preventDefault();
    $('#app'+$id).remove();


 });

};


$('#titlesAdds').click(function() {
    addallTit();
    });



});

Here is the link : Fiddle

Answer 1

Simply change event for close as it is dynamic element.

container.on('click','.closed-btn',function(e){
         e.preventDefault();
         $('#app'+$id).remove();

 });

Answer 2

One of your problem is, you want to remove content that is dynamically added. If you want to remove added element, using .on method and target the parent of element as selector. Then the second problem is, jquery did't know which element you want to remove. The idea is, find the parent of current close link, and remove. Simply change your code into this :

$('#addTitles').on('click','.closed-btn',function(e){
   e.preventDefault();
   var par = $(this).parent();
   $(par).remove();

});  

Answer 3

i am making a modification to Norlihazmey Ghazali's answer. But this modification would properly remove all components of the div that you have appended.

$('#addTitles').on('click','.closed-btn',function(e){

   e.preventDefault();

   var par = $(this).closest($("[id^=app]"));

   $(par).remove();

});