Как удалить элемент, который динамически добавляется в 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