element.removeChild

Résumé

La méthode element.removeChild() retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.

Syntaxe

var ancienEnfant = element.removeChild(enfant);
OU
element.removeChild(enfant);

• enfant est le nœud enfant à retirer du DOM.
• element est le nœud parent de enfant.
• ancienEnfant conserve une référence au nœud enfant retiré. ancienEnfant === enfant.

Le nœud retiré existe toujours en mémoire, mais ne fait plus partie du DOM.

Avec la syntaxe du premier exemple, il est possible de réutiliser ultérieurement dans votre code le nœud retiré, à l'aide de la référence à l'objet ancienEnfant. Avec la seconde forme montrée en exemple, aucune référence à l'objet ancienEnfant n'est conservée ; en supposant ainsi que votre code n'a conservé nulle part ailleurs aucune autre référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général automatiquement supprimé de la mémoire après un court moment.

La méthode provoque une exception s'il s'avère que le nœud enfant n'est pas un enfant du nœud element. Une exception sera aussi levée dans la cas où le nœud enfant est bien un enfant du nœud element au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'événement invoqué dans la cadre d'une tentative de suppression du nœud element (comme blur).

La méthode peut lever une exception de deux façons :

1. Si enfant était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :​​
Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node.
2. si l'enfant n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :
   Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.

Exemples

// <div id="haut" class="centeredDiv">
//   <div id="interne"></div> 
// </div> 
var divHaut = document.getElementById("haut"); 
var divInterne = document.getElementById("interne"); 
var ancienNoeud = divHaut.removeChild(divInterne);

// retire tous les enfants d'un élément
var element = document.getElementById("haut");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

// retire un element par son id
var element = document.getElementById("id_element_a_supprimer");
element.parentNode.removeChild(element);

Spécification

• DOM Level 1 Core: removeChild — traduction en français (non normative)
• DOM Level 2 Core: removeChild — traduction en français (non normative)
• DOM Level 3 Core: removeChild

Voir aussi

• Node.replaceChild
• Node.parentNode
• ChildNode.remove