jquery remove parent no funciona en divs dinámicamente creados

Question

im tratando de usar jquery para hacer que un botón elimine su div principal.

mi marcado:

<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 código de eliminación div:

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

esto funciona bien para el div que está en el HTML cuando se carga la página, pero no para div creados dinámicamente por el usuario (utilizando este código 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); 
}); 

solo para ser claro, la dinámica la creación funciona bien, el problema es eliminar esos divs.

algún consejo sería muy apreciada

Answer 1

Utilice un controlador de delegado (on) con la clase que el selector de modo que los nuevos botones que pueden ser añadidos más tarde seguirá funcionando.

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

Answer 2

No utilizar un manejador live - que ya no se utiliza en jQuery 1.7 y eliminado en jQuery 1.9 - un cambio importante para un gran número de personas.

su lugar, utilice el controlador de on, que es el modo recomendado ahora:

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

Answer 3

Hace poco estaba corriendo en un problema con $.on() que claro y muy similar a esta aplicación, ya que la mayoría "eliminar este es el padre" las funciones son

Para ilustrar con el ejemplo de esta pregunta:

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

el gran truco aquí es el segundo parámetro. debe seleccionar el contenedor $('.container') y pasar el selector de elementos del 'botón' como el segundo parámetro de la función .on. entonces una definición (de géneros)

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