[Javascript] - Supprimer un élément ajouté dynamiquement

Marsh Posté le 04-09-2020 à 15:57:49

Bonjour,

J'ai un petit code javascript qui m'ajoute du code dans un div parent lorsque je clique sur un bouton.
Sur chacune de ses lignes, j'ai un autre bouton permettant de supprimer la ligne en question.

Seul problème, la suppression ne fonctionne pas pour les lignes qui ont été ajouté dynamiquement.
J'ai trouvé la solution en passant par JQuery mais j'avais dans l'idée de le faire sans ça, juste pour savoir comment faire.

Mon DIV parent:

Code :

<div id="modulesListe">
</div>

Mon javascript permettant d'ajouter une ligne:

Code :

document.getElementById('addModule').addEventListener('click', function() {
document.getElementById('modulesListe').insertAdjacentHTML('beforeend', '<div class="line"><div class="col"><div class="content">test</div></div><div class="col"><a class=""deleteElement">DEL</a></div></div>')
});

L'idée est donc d'avoir ce qu'il faut pour qu'en cliquant sur le lien "DEL", que sa ligne entière soit supprimée, même celles ajoutées dynamiquement.

Mon javascript permettant de supprimer une ligne (là où j'ai mno problème quoi):

Code :

var deleteElement = document.getElementsByClassName('deleteElement');
for (var j = 0; j < deleteElement.length; j++) {
deleteElement[j].addEventListener('click', function() {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
});
}

Merci !

Message édité par Furaxx le 04-09-2020 à 15:59:50

Reply

Marsh Posté le 04-09-2020 à 15:57:49

Reply

Marsh Posté le 04-09-2020 à 16:39:47

Pour ce genre de problématique je penses que la bonne pratique est d'utiliser la délégation d'événement au niveau du bloc conteneur.

Ça se fait facilement avec Jquery mais je ne l'ai jamais fait en javacript pur...

Apparemment c'est possible mais je n'ai pas testé : https://flaviocopes.com/javascript-event-delegation/

Peut être quelque chose comme ça :

Code :

const on = (selector, eventType, childSelector, eventHandler) => {
const elements = document.querySelectorAll(selector)
for (element of elements) {
element.addEventListener(eventType, eventOnElement => {
if (eventOnElement.target.matches(childSelector)) {
eventHandler(eventOnElement)
}
})
}
}
on('#modulesListe', 'click', 'a.deleteElement', event => {
const item = event.target
item.parentNode.parentNode.parentNode.removeChild(item.parentNode.parentNode);
})

---------------
D3

Reply

Marsh Posté le 04-09-2020 à 19:40:57

Faut aussi se poser la question du "insertAdjacentHTML" qui si je le comprends bien zappe la réinterprétation du DOM. En travaillant avec des noeuds tu n'aurais pas ce problème car tu pourrais ajouter en même temps tes évènements de suppression.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Reply

[Javascript] - Supprimer un élément ajouté dynamiquement

Sujets relatifs:

Leave a Replay