Jak usunąć element dodawany dynamicznie w javascript

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 tak

Gdy użytkownik naciśnie przycisk ADD, przejdzie do funkcji javascript i utworzy ten sam blok div. Oto kod

function add_block() {
var curDiv = $('#parent');
var i = $('#parent div').size()/4 + 1;
var newDiv='<div id="block_'+ i + '" class="parent_div">' +
'<div>' +
'<input type="text">' +
'</div>' +
'<img src="arrow.jpg">' +
'<div>' +
'<input type="text">' +
'</div><div><a class="remove_block" href="#">Remove</a></div>' +
'</div>';
$(newDiv).appendTo(curDiv);
};

ilekroć użytkownik naciśnie link „Usuń” po lewej stronie bloku, ten odpowiedni blok należy usunąć. I to właśnie zrobiłem:

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

Problem polega na tym, że tylko usuwanie w oryginalnym bloku działa, reszta nie. Ktoś wie dlaczego?

Jestem nowy w jQuery i javascript, więc naprawdę doceniam każdą pomoc i sugestię. Uwaga: Używam jQuery 2.0.3

questionAnswers(5)

yourAnswerToTheQuestion