Suppression d’Éléments du DOM
Dans ce chapitre, exploration des méthodes pour supprimer des éléments du DOM.
Suppression d’éléments du DOM
Suppression dynamique d’éléments à l’aide de méthodes telles que removeChild() et remove().
RemoveChild()
La méthode removeChild() supprime un nœud enfant spécifié du nœud parent. Nécessite d’accéder à la fois au parent et à l’enfant à supprimer.
index.html
index.js
Remove()
La méthode remove() constitue une approche plus directe pour supprimer un élément sans avoir à accéder explicitement au nœud parent.
index.html
index.js
Exemple pratique : Gestionnaire de liste de tâches dynamique
Création d'une liste de tâches dynamique permettant aux utilisateurs d'ajouter de nouvelles tâches, d'insérer des tâches à des positions spécifiques et de supprimer des tâches selon les besoins.
index.html
index.css
index.js
Création et ajout de nouvelles tâches :
createElement()permet de créer dynamiquement de nouveaux éléments<li>et des boutons<button>lors de la saisie d'une nouvelle tâche par l'utilisateur ;appendChild()ajoute la tâche nouvellement créée à la fin de la liste, permettant l'ajout continu de tâches au fur et à mesure de l'interaction de l'utilisateur 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, illustrant la manière de 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énement au bouton de suppression de chaque tâche, permettant la suppression de la tâche correspondante lors du clic sur le bouton ; - Cette fonction est réutilisée pour les tâches existantes et nouvellement créées, garantissant un comportement cohérent pour toutes les tâches.
Gestion des éléments préexistants : Les tâches déjà présentes sont également dotées de la fonctionnalité de suppression en sélectionnant tous les boutons de suppression existants et en attachant les écouteurs d'événements nécessaires lors du chargement de la page.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.22Suppression d’Éléments du DOM
Glissez pour afficher le menu
Dans ce chapitre, exploration des méthodes pour supprimer des éléments du DOM.
Suppression d’éléments du DOM
Suppression dynamique d’éléments à l’aide de méthodes telles que removeChild() et remove().
RemoveChild()
La méthode removeChild() supprime un nœud enfant spécifié du nœud parent. Nécessite d’accéder à la fois au parent et à l’enfant à supprimer.
index.html
index.js
Remove()
La méthode remove() constitue une approche plus directe pour supprimer un élément sans avoir à accéder explicitement au nœud parent.
index.html
index.js
Exemple pratique : Gestionnaire de liste de tâches dynamique
Création d'une liste de tâches dynamique permettant aux utilisateurs d'ajouter de nouvelles tâches, d'insérer des tâches à des positions spécifiques et de supprimer des tâches selon les besoins.
index.html
index.css
index.js
Création et ajout de nouvelles tâches :
createElement()permet de créer dynamiquement de nouveaux éléments<li>et des boutons<button>lors de la saisie d'une nouvelle tâche par l'utilisateur ;appendChild()ajoute la tâche nouvellement créée à la fin de la liste, permettant l'ajout continu de tâches au fur et à mesure de l'interaction de l'utilisateur 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, illustrant la manière de 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énement au bouton de suppression de chaque tâche, permettant la suppression de la tâche correspondante lors du clic sur le bouton ; - Cette fonction est réutilisée pour les tâches existantes et nouvellement créées, garantissant un comportement cohérent pour toutes les tâches.
Gestion des éléments préexistants : Les tâches déjà présentes sont également dotées de la fonctionnalité de suppression en sélectionnant tous les boutons de suppression existants et en attachant les écouteurs d'événements nécessaires lors du chargement de la page.
Merci pour vos commentaires !
