Как удалить элемент, который динамически добавляется в JavaScript

У меня есть следующий код для создания какого-либо элемента

<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>

результат выглядит так

Когда пользователь нажимает кнопку ADD, он переходит к функции javascript и создает тот же блок div. Вот код

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

всякий раз, когда пользователь нажимает ссылку «Удалить» в левой части блока, этот соответствующий блок должен быть удален. И вот что я сделал:

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

Проблема в том, что только удаление в оригинальном блоке работает, остальные нет. Кто-нибудь знает почему?

Я новичок в jQuery и javascript, поэтому я действительно ценю любую помощь и предложение. Примечание: я использую jQuery 2.0.3

Ответы на вопрос(5)

Ваш ответ на вопрос