blob: d453835c0c359763d7cfde0ad3b92f723122233f (
plain)
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: Node.removeChild()
slug: Web/API/Node/removeChild
translation_of: Web/API/Node/removeChild
---
<div>{{APIRef("DOM")}}</div>
<p><code><strong>Node.removeChild()</strong></code> 方法從 DOM 移除一個子節點，並傳回移除的節點。</p>
<h2 id="語法">語法</h2>
<pre class="syntaxbox">var <em>oldChild</em> = <em>node</em>.removeChild(<em>child</em>);
<strong>或</strong>
<em>node</em>.removeChild(<em>child</em>);
</pre>
<ul>
<li><code>child</code> 是 DOM 中想要移除的子節點。</li>
<li><code>node</code> 是 <code>child</code> 的父節點。</li>
<li><code>oldChild</code> 為將被移除的子節點參照，例如：<code>oldChild === child</code>.</li>
</ul>
<p>被刪除的子節點仍然存於記憶體之中，只是不在 DOM 了。從上述的第一種語法形式中，我們知道，透過引用 <code>oldChild</code> 還是可以在程式中重新使用已經被移除的子節點。</p>
<p>而第二種語法形式，因為沒有保留 <code>oldChild</code> 引用，因此假設你並沒有在其他地方保留節點引用，則它會立即無法使用且不可挽回，而且通常會在短時間內從<a href="/en-US/docs/Web/JavaScript/Memory_Management">內存管理</a>中被自動刪除。</p>
<p>如果 <code>child</code> 並非某 <code>element</code> 節點的子元素，則此方法會拋出異常。而如果調用此方法時，<code>child</code> 雖是某 <code>element</code> 的子元素，但在嘗試刪除它的過程中已被其他事件處理程序刪除，也會拋出異常（例如 {{Event("blur")}}）。</p>
<h3 id="會丟出的錯誤">會丟出的錯誤</h3>
<p>兩種不同的方式拋出異常：</p>
<ol>
<li>
<p>如果 <code>child</code> 確實是 <code>element</code> 的子元素且確實存在於 DOM，但已被刪除，則會丟出以下異常：</p>
<p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p>
</li>
<li>
<p>如果 <code>child</code> 不存在於頁面的 DOM，則會拋出下列的異常：<br>
<br>
<code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p>
</li>
</ol>
<h2 id="例子">例子</h2>
<h3 id="簡單的例子">簡單的例子</h3>
<p>HTML:</p>
<pre class="brush: html"><div id="top">
<div id="nested"></div>
</div>
</pre>
<p>在知道父節點的情況下，刪除特定元素：</p>
<pre class="brush:js">let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);
</pre>
<p>沒有指定父節點的情況下，刪除特定元素：</p>
<pre class="brush:js">let node = document.getElementById("nested");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
</pre>
<p>從一個元素中移除所有子元素：</p>
<pre class="brush:js">let element = document.getElementById("top");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
</pre>
<h3 id="造成一個TypeError">造成一個TypeError</h3>
<pre class="brush: html"><!--Sample HTML code-->
<div id="top"> </div>
<script type="text/javascript">
let top = document.getElementById("top");
let nested = document.getElementById("nested");
// Throws Uncaught TypeError
let garbage = top.removeChild(nested);
</script>
</pre>
<h3 id="造成一個NotFoundError">造成一個NotFoundError</h3>
<pre class="brush: html"><!--Sample HTML code-->
<div id="top">
<div id="nested"></div>
</div>
<script type="text/javascript">
let top = document.getElementById("top");
let nested = document.getElementById("nested");
// This first call correctly removes the node
let garbage = top.removeChild(nested);
// Throws Uncaught NotFoundError
garbage = top.removeChild(nested);
</script>
</pre>
<h2 id="規範">規範</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="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{Compat("api.Node.removeChild")}}</p>
<h2 id="相關連結">相關連結</h2>
<ul>
<li>{{domxref("Node.replaceChild")}}</li>
<li>{{domxref("Node.parentNode")}}</li>
<li>{{domxref("ChildNode.remove")}}</li>
</ul>
|
