jquery remove parent no funciona en divs creados dinámicamente

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

mi marcado:

código de eliminación jquery 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 creado dinámicamente por el usuario (usando 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 claros, la creación dinámica está funcionando bien, el problema es eliminar esos divs.

cualquier consejo sería muy apreciado

Use un controlador delegado ( on ) con la clase como selector para que todos los botones nuevos que se agreguen más adelante sigan funcionando.

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

No utilice un controlador en vivo : se ha desaprobado en jQuery 1.7 y eliminado en jQuery 1.9 , un cambio radical para un gran número de personas.

En su lugar, utilice el controlador on , que es la forma recomendada ahora:

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

Hace poco me encontré con un problema con $ .on () que no está claro y es muy similar a esta aplicación, ya que la mayoría de las funciones de “eliminar esta función primaria” lo son.

Para ilustrar con el ejemplo de esta pregunta:

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

la gran captura 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 a la función .on . entonces una definición (de tipo)

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