jquery remove parent ne fonctionne pas sur les div créés dynamiquement

Question

Je suis en train d'essayer d'utiliser jquery pour que le bouton supprime sa div parente.

mon balisage:

<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 Code de suppression div:

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

cela fonctionne ok pour la div qui est dans le code HTML lorsque la page se charge, mais pas pour div créé dynamiquement par l'utilisateur (en utilisant ce code 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); 
}); 

juste pour être clair, la dynamique la création fonctionne bien, le problème est de supprimer ces divs.

des conseils seraient très appréciés

Answer 1

Utilisez un gestionnaire délégué (on) avec la classe comme le sélecteur de sorte que les nouveaux boutons qui sont ajoutés seront toujours travailler plus tard.

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

Answer 2

Ne pas utiliser un gestionnairelive - il a été dépréciée dans jQuery 1.7 et enlevés dans jQuery 1.9 - un changement de rupture pour un grand nombre de personnes.

Au lieu de cela, utilisez le gestionnaire on, qui est la méthode recommandée maintenant:

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

Answer 3

J'ai récemment été en cours d'exécution dans un problème avec $.on() que peu claire et très similaire à cette application, comme la plupart « supprimer ce parent est » les fonctions sont.

Pour illustrer avec l'exemple de cette question:

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

la grosse prise est le deuxième paramètre ici. vous devez sélectionner le conteneur $('.container') et passer le sélecteur d'élément du 'bouton' comme second paramètre à la fonction .on. donc une définition (des sortes)

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