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

Syntaxe

var oldChild = node.removeChild(child);

ou

node.removeChild(child);

• child est le nœud enfant à retirer du DOM.
• node est le nœud parent dechild.
• oldchild conserve une référence au nœud enfant retiré.oldchild ===child.

Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objetancienEnfant.

Avec la seconde forme montrée en exemple, aucune référence à l'objetancienEnfant n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en généralautomatiquement supprimé de la mémoire après un court moment.

Sichild n'est pas un enfant du nœudelement, la méthode provoque une exception. Une exception sera aussi lancée dans le cas où le nœudchild est bien un enfant du nœudelement 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œudelement (commeblur).

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

1. Sienfant é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

<!--Sample HTML code--><div align="center"></div><script type="text/javascript">  var top = document.getElementById("top");  var nested = document.getElementById("nested");  var garbage = top.removeChild(nested); //Cas test 2: la méthode lance l'exception (2)</script><!--Sample HTML code--><div align="center">  <div></div></div><script type="text/javascript">  var top = document.getElementById("top");  var nested = document.getElementById("nested");  var garbage = top.removeChild(nested); // Ce premier appel supprime correctement le noeud  // ......  garbage = top.removeChild(nested); // Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)</script>

<!--Sample HTML code--><div align="center">  <div></div></div>

// Supprime un élément spécifié quand son noeud parent est connuvar d = document.getElementById("top");var d_nested = document.getElementById("nested");var throwawayNode = d.removeChild(d_nested);

// Supprime un élément spécifié sans avoir à spécifier son noeud parentvar node = document.getElementById("nested");if (node.parentNode) {  node.parentNode.removeChild(node);}

// Supprime tous les enfant d'un élémentvar element = document.getElementById("top");while (element.firstChild) {  element.removeChild(element.firstChild);}

Spécifications

• 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