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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Javascript] - Supprimer un élément ajouté dynamiquement

Furaxx

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

Publicité

mechkurt

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

MaybeEijOrNot

but someone at least

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.

FORUM HardWare.fr

Programmation

Javascript/Node.js

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

Sujets relatifs
[Résolu] [JS] Besoin d’aide sur réalisation d’un convertisseur dec/hex	[Bug] Un plugin Wordpress fait disparaître des effets javascript
[Résolu] Performance Elementor et One Page, trop de CSS et Javascript	VBA TCD supprimer une année
Récupérer 2 élément à part dans des variable à partir d'un liste.	[FullCalendar] - Récupérer l'attribut className d'un élément mis en bg
Fonction javascript	[javascript]-Détecter les changements des checkbox
[Javascript] Désélectionner un choix d'un select	[Javascript] CORS et API calls
Plus de sujets relatifs à : [Javascript] - Supprimer un élément ajouté dynamiquement

Page générée en 0.051 secondes