Element.
Supprime un élément du document avec tout son contenu.
- Renvoie
undefined- Modifie l’original
- Oui
Exemple
#const notification = document.querySelector('#n1')
notification.remove()
console.log(document.querySelector('#n1'))
console.log(notification.isConnected)
console.log(document.querySelectorAll('#notifications li').length)Définition et utilisation
#La méthode remove() détache l’élément du document, si bien qu’il disparaît de la page avec tous ses enfants. Vous l’appelez directement sur l’élément à supprimer, sans passer par son parent.
L’élément supprimé existe encore en mémoire tant que vous conservez une référence vers lui dans une variable. Vous pouvez le réinsérer plus tard, par ex. avec append(). La propriété isConnected vous indique si l’élément se trouve actuellement dans le document.
L’ancienne façon de faire est parent.removeChild(element). Pour supprimer tous les enfants d’un élément en une fois, le plus simple est d’appeler element.replaceChildren() sans argument.
Syntaxe
#element.remove()Plus d’exemples
#const cart = document.querySelector('#cart')
cart.addEventListener('click', (event) => {
if (!event.target.matches('.delete')) return
event.target.closest('li').remove()
console.log('Articles dans le panier :', cart.children.length)
})
cart.querySelector('.delete').click()document.querySelectorAll('#lessons .done').forEach((item) => item.remove())
const lessons = document.querySelector('#lessons')
console.log(lessons.children.length)
console.log(lessons.textContent)Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- En supprimant des éléments d’une liste
querySelectorAll()dans une boucle, vous ne risquez rien, car cette liste est statique. Méfiez-vous en revanche des collections « vivantes », commechildren. - Si l’élément doit revenir sur la page, conservez une référence vers lui dans une variable et réinsérez-le avec
append(). - Pour vider tout le contenu d’un élément, utilisez
element.replaceChildren().
Entrées associées
#- Element.append()Ajoute des éléments ou du texte à la fin du contenu d’un élément.
- Element.replaceWith()Remplace un élément du document par d’autres éléments ou du texte. L’ancien élément est retiré de la page.
- document.createElement()Crée un nouvel élément HTML avec le nom de balise donné, prêt à être inséré dans la page.
- document.querySelectorAll()Renvoie une liste statique (NodeList) de tous les éléments qui correspondent à un sélecteur CSS.
- Element.closest()Renvoie l’ancêtre le plus proche (ou l’élément lui-même) qui correspond à un sélecteur CSS, ou null.
- Event.targetL’élément sur lequel l’événement s’est réellement produit, par ex. le bouton cliqué à l’intérieur d’une liste.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.