1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
title: element.removeChild
slug: Web/API/Node/removeChild
tags:
- API
- DOM
- Enfant
- Méthodes
- Noeuds
- Suppression
translation_of: Web/API/Node/removeChild
---
{{ ApiRef("DOM") }}
La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.
## Syntaxe
var oldChild = node.removeChild(child);
OR
node.removeChild(child);
- `child` est le nœud enfant à retirer du DOM.
- `node `est le nœud parent de `child`.
- `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'objet `ancienEnfant`_._
Avec la seconde forme montrée en exemple, aucune référence à l'objet `ancienEnfant` 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éral [automatiquement supprimé](/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire) de la mémoire après un court moment.
Si `child` n'est pas un enfant du noeud `element`, la méthode provoque une exception. Une exception sera aussi lancé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
```html
<!--Sample HTML code-->
<div id="top" 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 id="top" align="center">
<div id="nested"></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>
```
```html
<!--Sample HTML code-->
<div id="top" align="center">
<div id="nested"></div>
</div>
```
```js
// Supprime un élément spécifié quand son noeud parent est connu
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
```
```js
// Supprime un élément spécifié sans avoir à spécifier son noeud parent
var node = document.getElementById("nested");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
```
```js
// Supprime tous les enfant d'un élément
var element = document.getElementById("top");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
```
## Spécifications
- [DOM Level 1 Core: removeChild](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild) — [traduction en français](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild) (non normative)
- [DOM Level 2 Core: removeChild](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-1734834066) (non normative)
- [DOM Level 3 Core: removeChild](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066)
## Voir aussi
- {{domxref("Node.replaceChild")}}
- {{domxref("Node.parentNode")}}
- {{domxref("ChildNode.remove")}}
|
