# 刪除DOM 刪除一個DOM節點就比插入要容易得多。 要刪除一個節點，首先要獲得該節點本身以及它的父節點，然后，調用父節點的`removeChild`把自己刪掉： ``` // 拿到待刪除節點: var self = document.getElementById('to-be-removed'); // 拿到父節點: var parent = self.parentElement; // 刪除: var removed = parent.removeChild(self); removed === self; // true ``` 注意到刪除后的節點雖然不在文檔樹中了，但其實它還在內存中，可以隨時再次被添加到別的位置。 當你遍歷一個父節點的子節點并進行刪除操作時，要注意，`children`屬性是一個只讀屬性，并且它在子節點變化時會實時更新。 例如，對于如下HTML結構： ``` <div id="parent"> <p>First</p> <p>Second</p> </div> ``` 當我們用如下代碼刪除子節點時： ``` var parent = document.getElementById('parent'); parent.removeChild(parent.children[0]); parent.removeChild(parent.children[1]); // <-- 瀏覽器報錯 ``` 瀏覽器報錯：`parent.children[1]`不是一個有效的節點。原因就在于，當`&lt;p&gt;First&lt;/p&gt;`節點被刪除后，`parent.children`的節點數量已經從2變為了1，索引`[1]`已經不存在了。 因此，刪除多個節點時，要注意`children`屬性時刻都在變化。 ## 練習 * JavaScript * Swift * HTML * ANSI C * CSS * DirectX ``` <!-- HTML結構 --> <ul id="test-list"> <li>JavaScript</li> <li>Swift</li> <li>HTML</li> <li>ANSI C</li> <li>CSS</li> <li>DirectX</li> </ul> ``` 把與Web開發技術不相關的節點刪掉： ``` 'use strict'; // TODO // 測試: ;(function () { var arr, i, t = document.getElementById('test-list'); if (t && t.children && t.children.length === 3) { arr = []; for (i = 0; i < t.children.length; i ++) { arr.push(t.children[i].innerText); } if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) { alert('測試通過!'); } else { alert('測試失敗: ' + arr.toString()); } } else { alert('測試失敗!'); } })(); ```