Méthode removeChild() de l'Element HTML DOM

Définition et utilisation

removeChild() La méthode supprime les enfants d'un élément.

Cette méthode retourne un objet Node du noeud supprimé ; si le noeud n'existe pas, il retourne null.

Avis

Les noeuds enfants sont supprimés du Document Object Model (DOM).

Cependant, il est possible de modifier le noeud retourné et de le replacer dans le DOM (voir l'exemple ci-dessous).

Veuillez également consulter :

remove() méthode

appendChild() méthode

insertBefore() méthode

replaceChild() méthode

childNodes attribut

firstChild attribut

lastChild attribut

firstElementChild attribut

lastElementChild attribut

Exemple

Exemple 1

Supprimer le premier élément de la liste :

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

Avant suppression :

  • Café
  • Thé
  • Lait

Après suppression :

  • Thé
  • Lait

Essayez-le vous-même

Exemple 2

Si la liste a des noeuds enfants, supprimez le premier (index 0) :

const list = document.getElementById("myList");
if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

Essayez-le vous-même

Exemple 3

Supprimer tous les noeuds enfants de la liste :

const list = document.getElementById("myList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

Essayez-le vous-même

Exemple 4

Supprimer un élément de son noeud parent :

element.parentNode.removeChild(element);

Essayez-le vous-même

Exemple 5

Supprimer un élément de son élément parent puis l'insérer à nouveau :

const element = document.getElementById("myLI");
function removeLi() {
  element.parentNode.removeChild(element);
}
function appendLi() {
  const list = document.getElementById("myList");
  list.appendChild(element);
}

Essayez-le vous-même

Exemple 6 : Avertissement

Utilisez appendChild() ou insertBefore() pour insérer le noeud supprimé dans le même document.

Vous pouvez utiliser document.adoptNode() ou document.importNode() pour l'insérer dans un autre document.

L'exemple suivant supprime un élément de son élément parent et l'insère dans un autre document :

const child = document.getElementById("mySpan");
function remove() {
  child.parentNode.removeChild(child);
}
function insert() {
  const frame = document.getElementsByTagName("IFRAME")[0]
  const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
  const x = document.adoptNode(child);
  h.appendChild(x);
}

Essayez-le vous-même

Syntaxe

element.removeChild(node)

ou

node.removeChild(node)

Paramètre

Paramètre Description
node Obligatoire. Noeud (élément) à supprimer.

Valeur de retour

Type Description
Node

Noeud (élément) supprimé.

Si le noeud enfant n'existe pas, il est null.

Support du navigateur

element.removeChild() C'est une fonctionnalité de DOM Level 1 (1998).

Tous les navigateurs le supportent pleinement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support