JQuery удалить родительский не работает на динамически создаваемых div

Question

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

моя разметка:

<div class="web_store_fields" id="web_store_input1">
<p>
<label for="web_store_address[]"  >Store Address : </label>        
<input name="web_store_address[]" class="web_store_info"  type="text" value="http://www." size="35"/>
<input class="button_remove_web_store" type="button" value="Remove"  />
</div>

Код удаления jquery div:

$('.button_remove_web_store').click(function() {
$(this).parents("div:first").remove();
});

это работает нормально для div, который находится в html, когда страница загружается, но не для div, динамически создаваемый пользователем (с использованием этого кода jquery):

$('#button_add_web_store').click(function() {
var num = $('.web_store_fields').length;
var newNum  = new Number(num + 1);      
var newElem = $('#web_store_input' + num).clone().attr('id', 'web_store_input' + newNum);
$('#web_store_input' + num).after(newElem);
});

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

любые советы будут высоко оценены

Answer 1

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

$('body').on('click', '.button_remove_web_store', function() {
    $(this).parents("div:first").remove();
});

Answer 2

Не используйте обработчик live - он устарел в jQuery 1.7, а удален в jQuery 1.9 - критическое изменение для многих люди.

Вместо этого используйте обработчик on , который сейчас рекомендуется:

$(document).on('click', '.button_remove_web_store', function() {
    $(this).parents("div:first").remove();
});

Answer 3

Недавно я столкнулся с проблемой с $. On () , которая неясна и очень похожа на это приложение, так как большинство функций «удалить этого родителя».

Для иллюстрации на примере этого вопроса:

$('.web_store_fields').on('click', '.button_remove_web_store', function(e){
    $(this).parent().remove();
});

большой улов здесь - второй параметр. Вы должны выбрать контейнер $('.container') и передать селектор элементов «кнопки» в качестве второго параметра функции .on. так что определение (своего рода)

$('.container').on('click', '.myremovebutton', function(e){
    $(this).parent().remove();
});