1 files changed, 112 insertions, 0 deletions
diff --git a/files/fr/web/api/node/removechild/index.html b/files/fr/web/api/node/removechild/index.html
new file mode 100644
index 0000000000..cff831cdef
--- /dev/null
+++ b/files/fr/web/api/node/removechild/index.html
@@ -0,0 +1,112 @@
+---
+title: element.removeChild
+slug: Web/API/Node/removeChild
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Méthodes
+  - Noeuds
+  - Suppression
+translation_of: Web/API/Node/removeChild
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La méthode <code><strong>Node.removeChild()</strong></code> retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>);
+<strong>OR</strong>
+<em>node</em>.removeChild(<em>child</em>);
+</pre>
+
+<ul>
+ <li><code>child</code> est le nœud enfant à retirer du DOM.</li>
+ <li><code><font face="Consolas, Liberation Mono, Courier, monospace">node </font></code>est le nœud parent de <code>child</code>.</li>
+ <li><code>oldchild</code> conserve une référence au nœud enfant retiré. <code>oldchild</code> === <code>child</code>.</li>
+</ul>
+
+<p>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 <code>ancienEnfant</code><em>. </em></p>
+
+<p>Avec la seconde forme montrée en exemple, aucune référence à l'objet <code>ancienEnfant</code> 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 <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire">automatiquement supprimé</a> de la mémoire après un court moment.</p>
+
+<p>Si  <code>child</code> n'est pas un enfant du noeud  <code>element</code>, la méthode provoque une exception. Une exception sera aussi lancée dans la cas où le nœud <code>enfant </code>est bien un enfant du nœud <code>element </code>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 <code>element </code>(comme <em>blur</em>).</p>
+
+<p>La méthode peut lever une exception de deux façons :</p>
+
+<ol>
+ <li>Si <code>enfant</code> était bien un enfant de <font face="Consolas, Liberation Mono, Courier, monospace">element </font>et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :<code></code><br>
+  <code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node</code>.</li>
+ <li>si l'<code>enfant</code> n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :<br>
+  <code>Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.</code></li>
+</ol>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="comment token">&lt;!--Sample HTML code--&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+      <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">//Cas test 2: la méthode lance l'exception (2)</span>
+
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+<span class="comment token">&lt;!--Sample HTML code--&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+      <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Ce premier appel supprime correctement le noeud</span>
+
+      <span class="comment token">// ......</span>
+      garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)</span>
+
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="comment token">&lt;!--Sample HTML code--&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// Supprime un élément spécifié quand son noeud parent est connu</span>
+<span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> d_nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> throwawayNode <span class="operator token">=</span> d<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>d_nested<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// Supprime un élément spécifié sans avoir à spécifier son noeud parent</span>
+<span class="keyword token">var</span> node <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  node<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>node<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush:js line-numbers  language-js">
+<code class="language-js"><span class="comment token">// Supprime tous les enfant d'un élément</span>
+<span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">while</span> <span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  element<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a> — <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">traduction en français</a> (non normative)</li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a> — <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-1734834066">traduction en français</a> (non normative)</li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.parentNode")}}</li>
+ <li>{{domxref("ChildNode.remove")}}</li>
+</ul>