36、JavaScript 删除DOM

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

 

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

  1. // 拿到待删除节点:
  2. var self = document.getElementById('to-be-removed');
  3. // 拿到父节点:
  4. var parent = self.parentElement;
  5. // 删除:
  6. var 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. var parent = document.getElementById('parent');
  2. parent.removeChild(parent.children[0]);
  3. parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错:parent.children[1]不是一个有效的节点。原因就在于,当<p>First</p>节点被删除后,parent.children的节点数量已经从2变为了1,索引[1]已经不存在了。

 

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

JavaScript 删除DOM

付杰
  • ¥ 69.0元
  • 市场价:99.0元
  • ¥ 99.9元
  • 市场价:299元
  • ¥ 29.99元
  • 市场价:888元
  • ¥ 199.0元
  • 市场价:899.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: