web-dev-qa-db-fra.com

Comment supprimer un élément 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 enter image description here

Lorsque l'utilisateur appuie sur le bouton AJOUTER, il passe à une fonction javascript et crée 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" situé à gauche du bloc, celui-ci doit être supprimé. Et voici ce que j'ai fait:

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

Le problème est que seule la suppression dans le bloc d'origine fonctionne, le reste n'a pas fonctionné. Quelqu'un sait pourquoi? enter image description here

JQuery et javascript sont nouveaux pour moi, et j’apprécie donc toute aide et suggestion Note: j’utilise jQuery 2.0.3

javascriptjqueryhtmljavascript-events
15
Nexus

Comme il s'agit de contenu dynamique, vous ne pouvez pas lier des événements tels que le contenu statique, il ne sera pas lié aux éléments, car ils n'apparaissent pas au moment de la liaison.

Donc, vous devriez lier un événement comme ceci:

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

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énements.

Lorsque vous enregistrez un événement normal, il ajoute le gestionnaire uniquement aux éléments présents dans le dom à ce moment-là, mais lorsque la délégation d'événements est utilisée, le gestionnaire est enregistré dans un élément existant au moment de l'exécution et le sélecteur transmis est évalué quand l'événement est projeté jusqu'à l'élément

$(document).on('click', '.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});
3
Arun P Johny

J'ai eu le cas où l'élément dynamique à supprimer n'était pas un descendant de mon écouteur d'événement: 

siteSel.on('select2:select', function (e) {
      // remove some other dynamic element on page.
});

La solution que j'ai trouvée utilisait when () method.

siteSel.on('select2:select', function (e) {
      let dynamicElement = $('.element');
      $.when(dynamicElement).then(dynamicElement.remove());
});
0
Rmy5
$('a.remove_block').on('click',function(events){
  $(this).parents('.parent_div').remove();
  return false;
});
0
Adrian