jquery remove parent не работает на динамически созданных divs

Question

im пытается использовать 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 код удаления ДИВ:

$('.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

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

$('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(); 
});