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

Ответ 1

Поскольку это динамический контент, вы не можете связывать такие события, как статический контент, он не будет связываться с элементами, потому что они не появляются в момент привязки.

Итак, вы должны связать событие следующим образом:

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

Ответ 2

Вам нужно использовать делегирование событий для динамически добавленных элементов. Даже если вы использовали .on(), используемый синтаксис не использует делегирование событий.

Когда вы регистрируете нормальное событие, он добавляет обработчик только к тем элементам, которые существуют в dom в этот момент времени, но когда используется делегирование событий, обработчик зарегистрирован на элемент, который существует во время выполнения, и переданный селектор оценивается, когда событие пузырится до элемента

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

Ответ 3

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

Ответ 4

Вы можете использовать .live для этого:

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