5.4 删除一个元素节点或者文本节点

5.4  删除一个元素节点或者文本节点

如果一个元素变得多余了，那么自然应该删掉。JavaScript提供了从DOM中干净地删除任何元素的方法。

 方 法

removeChild函数能够用于删除父节点的任意子节点，并返回被删除的对象。

看看下面的HTML：

File: remove_element.html (excerpt)

<p>

   <a id="sirius" href="sirius.html">Sirius</a>

</p>

可以用removeChild函数将超链接从它的父节点中删除：

File: remove_element.js (excerpt)

var anchor = document.getElementByIdx("sirius");

var parent = anchor.parentNode;

var removedChild = parent.removeChild(anchor);

变量removeChild会指向某元素，不过该元素不再存在于DOM中：它只存在于内存中，就好像刚刚用createElement创建了它。如果愿意，也可以再把它放到页面中的某处，或者不管它，直接丢弃。经过上面的代码，DOM大概会变成这样：

<p>

</p>

当然也不必把removeChild的返回值赋值给某变量。可以直接执行它，忘掉它有返回值的这个事实：

var anchor = document.getElementByIdx("sirius");

var parent = anchor.parentNode;

parent.removeChild(anchor);

 讨 论

如果想删除的元素有想保留的子元素，则必须找回那些子元素，放回到文档中，再把父元素删掉。可以使用前面提到的insertBefore函数来达到这个目的。如果某些元素已经在DOM中了，那么对他们使用insertBefore则相当于简单地挪动位置。

下面的HTML段元素中拥有多个子元素：

File: remove_element2.html (excerpt)

<div id="starContainer">

  <p id="starLinks">

    <a href="aldebaran.html">Aldebaran</a>

    <a href="castor.html">Castor</a>

    <a href="pollux.html">Pollux</a>

  </p>

</div>

可以循环遍历段落的子节点，然后将每个子节点重新定位，之后再删除段落节点：

File: remove_element2.js (excerpt)

var parent = document.getElementByIdx("starLinks");

var container = document.getElementByIdx("starContainer");

while (parent.childNodes.length > 0)

{

  container.insertBefore(parent.childNodes[0], parent);

}

container.removeChild(parent);

最后DOM的结构如下：

<div id="starContainer">

  <a href="aldebaran.htm">Aldebaran</a>

  <a href="castor.htm">Castor</a>

  <a href="pollux.htm">Pollux</a>

</div>