Jak usunąć element, który dodaje dynamicznie javascript

Question

Mam następujący kod, aby utworzyć jakiś element

<div id="parent"> 
    <div id="block_1" > 
     <div> 
      <input type="text"> 
     </div> 
     <img src="arrow.jpg"> 
     <div> 
      <input type="text"> 
     </div> 
     <div><a href="#" class="remove_block">Remove</a></div> 
    </div> 
</div> 

wynik wyglądać następująco

Gdy użytkownik naciśnie przycisk ADD to pójdzie do funkcji javascript i utworzyć ten sam blok div. Oto kod

za każdym razem, gdy użytkownik naciśnie link "Usuń" po lewej stronie bloku, odpowiedni blok powinien zostać usunięty. I to jest to, co zrobiłem:

$('a.remove_block').on('click',function(events){ 
    $(this).parents('div').eq(1).remove(); 
}); 

Problem polega na tym, że tylko usuń w oryginalnej pracy bloku, reszta nie. Ktoś wie dlaczego?

Jestem nowy jQuery i JavaScript, więc naprawdę wdzięczni za każdą pomoc i sugestie Uwaga: Używam jQuery 2.0.3

Answer 1

bo to dynamiczna zawartość, nie można powiązać wydarzenia jak statyczny, nie będzie wiązać się z elementów, ponieważ nie pojawiają się na czas wiązania.

Więc należy powiązać zdarzenie tak:

$('#parent').on('click', 'a.remove_block', function(events){ 
    $(this).parents('div').eq(1).remove(); 
}); 

Answer 2

Trzeba użyć delegacji zdarzeń dla dynamicznie dodanych elementów. Nawet jeśli użyłeś .on(), używana składnia nie korzysta z delegowania zdarzeń.

Po zarejestrowaniu zwykłego zdarzenia dodaje on moduł obsługi tylko do tych elementów, które istnieją w domenie w danym momencie, ale gdy korzysta z delegowania zdarzeń, przewodnik jest zarejestrowany w elemencie, który istnieje w momencie wykonania i przeszedł selektor jest oceniana gdy zdarzenie przepuszcza zapisu do elementu

$(document).on('click', '.remove_block', function(events){ 
    $(this).parents('div').eq(1).remove(); 
}); 

Answer 3

Można użyć .live dla tego:

$('body').live('click','#idDinamicElement', function(){ 
    // your code here 
}); 

Answer 4

$('a.remove_block').on('click',function(events){ 
    $(this).parents('.parent_div').remove(); 
    return false; 
});