Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1713 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2361414
Furaxx
Posté le 04-09-2020 à 15:57:49  profilanswer
 

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 :
  1. <div id="modulesListe">
  2. </div>


 
Mon javascript permettant d'ajouter une ligne:

Code :
  1. document.getElementById('addModule').addEventListener('click', function() {
  2.       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>')
  3. });


 
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 :
  1. var deleteElement = document.getElementsByClassName('deleteElement');
  2.         for (var j = 0; j < deleteElement.length; j++) {
  3.             deleteElement[j].addEventListener('click', function() {
  4.                 this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
  5.             });
  6.         }


 
Merci !


Message édité par Furaxx le 04-09-2020 à 15:59:50
mood
Publicité
Posté le 04-09-2020 à 15:57:49  profilanswer
 

n°2361417
mechkurt
Posté le 04-09-2020 à 16:39:47  profilanswer
 

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 :
  1. const on = (selector, eventType, childSelector, eventHandler) => {
  2.   const elements = document.querySelectorAll(selector)
  3.   for (element of elements) {
  4.     element.addEventListener(eventType, eventOnElement => {
  5.       if (eventOnElement.target.matches(childSelector)) {
  6.         eventHandler(eventOnElement)
  7.       }
  8.     })
  9.   }
  10. }
  11. on('#modulesListe', 'click', 'a.deleteElement', event => {
  12.   const item = event.target
  13.   item.parentNode.parentNode.parentNode.removeChild(item.parentNode.parentNode);
  14. })


---------------
D3
n°2361418
MaybeEijOr​Not
but someone at least
Posté le 04-09-2020 à 19:40:57  profilanswer
 

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.

Aller à :
Ajouter une réponse
  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 JavascriptVBA 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


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR