Comment supprimer un élément qui est ajouté dynamiquement en javascript

J'ai le code suivant pour créer un élément

<div id="parent"> <div id="block_1" > <div> <input type="text"> </div> <img src="arrow.jpg"> <div> <input type="text"> </div> <div><a href="#" class="remove_block">Remove</a></div> </div> </div> 

Le résultat ressemble à ceci Entrez la description de l'image ici

Lorsque l'utilisateur appuie sur le bouton ADD, il passera à une fonction javascript et créera le même bloc de div. Voici le code

 function add_block() { var curDiv = $('#parent'); var i = $('#parent div').size()/4 + 1; var newDiv='<div id="block_'+ i + '" class="parent_div">' + '<div>' + '<input type="text">' + '</div>' + '<img src="arrow.jpg">' + '<div>' + '<input type="text">' + '</div><div><a class="remove_block" href="#">Remove</a></div>' + '</div>'; $(newDiv).appendTo(curDiv); }; 

Chaque fois que l'utilisateur appuie sur le lien "Supprimer" sur le côté gauche du bloc, le bloc correspondant doit être supprimé. Et c'est ce que j'ai fait:

 $('a.remove_block').on('click',function(events){ $(this).parents('div').eq(1).remove(); }); 

Le problème est que seul le retrait dans le travail de blocage d'origine, le reste n'a pas. Quelqu'un sait pourquoi? Entrez la description de l'image ici

Je suis nouveau sur jQuery et javascript, donc j'apprécie vraiment toute aide et suggestion Note: j'utilise jQuery 2.0.3

Parce que c'est un contenu dynamique, vous ne pouvez pas lier des événements comme le contenu statique, il ne se liera pas aux éléments car ils n'apparaissent pas au moment où vous vous liez.

Vous devez donc lier un événement comme celui-ci:

 $('#parent').on('click', 'a.remove_block', function(events){ $(this).parents('div').eq(1).remove(); }); 

Vous devez utiliser la délégation d'événements pour les éléments ajoutés dynamiquement. Même si vous avez utilisé .on() la syntaxe utilisée n'utilise pas la délégation d'événement.

Lorsque vous enregistrez un événement normal, il ajoute le gestionnaire uniquement aux éléments qui existent dans le domaine à ce moment-là, mais lors de l'utilisation de la délégation d'événement, le gestionnaire est enregistré dans un élément qui existe au moment de l'exécution et que le sélecteur passé est évalué Lorsque l'événement est bouillonné jusqu'à l'élément

 $(document).on('click', '.remove_block', function(events){ $(this).parents('div').eq(1).remove(); }); 
 $('a.remove_block').on('click',function(events){ $(this).parents('.parent_div').remove(); return false; }); 

Vous pouvez utiliser le fichier .live pour cela:

 $('body').live('click','#idDinamicElement', function(){ // your code here });