删除一个DOM节点就比插入要容易得多。

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

  1. // 拿到待删除节点:
  2. let self = document.getElementById('to-be-removed');
  3. // 拿到父节点:
  4. let parent = self.parentElement;
  5. // 删除:
  6. let removed = parent.removeChild(self);
  7. removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

例如，对于如下HTML结构：

  1. <div id="parent">
  2.     <p>First</p>
  3.     <p>Second</p>
  4. </div>

当我们用如下代码删除子节点时：

  1. let parent = document.getElementById('parent');
  2. parent.removeChild(parent.children[0]);
  3. parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当

First

节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

练习

  1. <!-- HTML结构 -->
  2. <ul id="test-list">
  3.     <li>JavaScript</li>
  4.     <li>Swift</li>
  5.     <li>HTML</li>
  6.     <li>ANSI C</li>
  7.     <li>CSS</li>
  8.     <li>DirectX</li>
  9. </ul>

把与Web开发技术不相关的节点删掉：

  1. // TODO
  3. // 测试:
  4. (function () {
  5.     let
  6.         arr, i,
  7.         t = document.getElementById('test-list');
  8.     if (t && t.children && t.children.length === 3) {
  9.         arr = [];
  10.         for (i = 0; i < t.children.length; i ++) {
  11.             arr.push(t.children[i].innerText);
  12.         }
  13.         if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
  14.             console.log('测试通过!');
  15.         }
  16.         else {
  17.             console.log('测试失败: ' + arr.toString());
  18.         }
  19.     }
  20.     else {
  21.         console.log('测试失败!');
  22.     }
  23. })();