files/de/web/api/node/removechild/index.html


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

---
title: Node.removeChild()
slug: Web/API/Node/removeChild
tags:
  - API
  - DOM
  - Entfernen
  - Knoten
  - Löschen
  - Methode(2)
  - Referenz
translation_of: Web/API/Node/removeChild
---
<div>
<div>{{APIRef("DOM")}}</div>
</div>

<p>Die Methode <code><strong>Node.removeChild()</strong></code> entfernt einen Kindknoten aus dem DOM. Gibt den entfernten Knoten zurück.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox"><em>var oldChild</em> = <em>element</em>.removeChild(<em>child</em>);
<strong>ODER</strong>
<em>element</em>.removeChild(<em>child</em>);
</pre>

<ul>
 <li><code>child</code> ist der Kindknoten, der aus dem DOM entfernt werden soll.</li>
 <li><code>element</code> is der Elternknoten von <code>child</code>.</li>
 <li><code>oldChild</code> hält eine Referenz auf den entfernten Kindknoten. <code>oldChild</code> === <code>child</code>.</li>
</ul>

<p>Der entfernte Kindknoten bleibt im Speicher erhalten, ist aber nicht länger Teil des DOM. Mit der ersten Syntax-Form ist es möglich, den entfernten Knoten später im Code wieder zu verwenden, über die <code>oldChild</code> Objektreferenz. In der zweiten Form wird jedoch keine <code style="font-style: normal;">oldChild</code>-Refernenz behalten, also wird (vorausgesetzt dass nirgendwo anders im Code eine Referenz gehalten wird) der Knoten unbenutzbar und nicht erreichbar, und wird nach kurzer Zeit <a href="/en-US/docs/Web/JavaScript/Memory_Management">automatisch aus dem Speicher entfernt</a>. </p>

<p>Wenn <code>child</code> kein Kind des Knotens <code>element</code> ist, wirft die Methode eine Exception. Dies passiert auch wenn <code>child</code> zwar zum Aufruf der Methode ein Kind von <code>element</code> war, aber durch einen beim Entfernen des Knotens aufgerufenen Event Handler bereits aus dem DOM entfernt wurde (z.B. blur).</p>

<p> </p>

<h2 id="Example" name="Example">Beispiele</h2>

<pre>&lt;!-- Beispiel HTML --&gt;

&lt;div id="top" align="center"&gt;
  &lt;div id="nested"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush:js">// Ein bestimmtes Element entfernen, wenn der Elternknoten bekannt ist
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
</pre>

<pre class="brush:js">// Ein bestimmtes Element entfernen, ohne den Elternknoten zu kennen
var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}
</pre>

<pre class="brush:js">// Alle Kindknoten eines Elements entfernen
var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
</pre>

<h2 id="Specification" name="Specification">Spezifikation</h2>

<ul>
 <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li>
 <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></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="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li>{{domxref("Node.replaceChild")}}</li>
 <li>{{domxref("Node.parentNode")}}</li>
 <li>{{domxref("ChildNode.remove")}}</li>
</ul>