Suppression des Éléments

Dans ce chapitre, plongeons-nous dans la manière de supprimer les éléments du DOM.

Suppression des éléments du DOM

Les éléments peuvent être supprimés dynamiquement en utilisant des méthodes comme removeChild() et remove().

RemoveChild()

La méthode removeChild() supprime un nœud enfant spécifié du nœud parent. Elle nécessite d'accéder à la fois au parent et à l'enfant à supprimer.

Remove()

La méthode remove() est une approche plus directe pour supprimer un élément sans avoir besoin d'accéder explicitement au nœud parent.

Exemple Pratique : Gestionnaire de Liste de Tâches Dynamique

Construisons une liste de tâches dynamique où les utilisateurs peuvent ajouter de nouvelles tâches, insérer des tâches à des positions spécifiques et supprimer des tâches selon les besoins.

Création et Ajout de Nouvelles Tâches :

• createElement() est utilisé pour créer de nouveaux éléments <li> et <button> dynamiquement lorsque l'utilisateur saisit une nouvelle tâche ;
• appendChild() ajoute la tâche nouvellement créée à la fin de la liste, permettant l'ajout continu de tâches à mesure que l'utilisateur interagit avec la liste.
  

Insertion de Tâches à des Positions Spécifiques : Le bouton "Insérer une Tâche en Haut" utilise insertBefore() pour ajouter des tâches en haut de la liste, montrant comment placer des éléments à des positions précises au sein du parent.

Ajout de la Fonctionnalité de Suppression :

• La fonction addRemoveFunctionality() attache un écouteur d'événements au bouton de suppression de chaque tâche, permettant à chaque tâche d'être supprimée lorsque le bouton est cliqué ;
• Cette fonction est réutilisée pour les tâches existantes et les nouvelles tâches créées, assurant un comportement cohérent pour toutes les tâches.
  

Gestion des Éléments Préexistants : Les tâches existantes sont également équipées de la fonctionnalité de suppression en sélectionnant tous les boutons de suppression actuels et en attachant les écouteurs d'événements nécessaires lors du chargement de la page.