JavaScript的removeChild()函数用法详解

什么是removeChild()函数？

在JavaScript中，使用removeChild()函数可以删除指定的子节点。

removeChild()函数的用法

要使用removeChild()函数，需要先找到要删除的节点，然后将其作为参数传递给removeChild()函数。例如：

var element = document.getElementById("myDiv");
var child = document.getElementById("myElement");
element.removeChild(child);

上面的代码会在DOM中找到一个ID为“myDiv”的元素，并查找其子元素“myElement”，然后将其从myDiv元素中移除。

示例说明

示例1

HTML代码：

<div id="myDiv">
  <p>第一段</p>
  <p>第二段</p>
  <p>第三段</p>
</div>

<button onclick="removeElement()">删除第一个段落</button>

JavaScript代码：

function removeElement() {
  var div = document.getElementById("myDiv");
  var child = div.firstChild;
  div.removeChild(child);
}

上面的JavaScript代码会在DOM中查找一个ID为“myDiv”的元素，并将其第一个子元素（即第一个段落）移除。当然，也可以使用下面这个代码片段获得同样的效果：

function removeElement() {
  var p = document.getElementsByTagName("p")[0];
  p.parentNode.removeChild(p);
}

示例2

HTML代码：

<ul id="myList">
  <li>苹果</li>
  <li>香蕉</li>
  <li>葡萄</li>
</ul>

<button onclick="removeItem()">移除第一个列表项</button>

JavaScript代码：

function removeItem() {
  var ul = document.getElementById("myList");
  var li = ul.getElementsByTagName("li")[0];
  ul.removeChild(li);
}

上面的JavaScript代码会在DOM中查找一个ID为“myList”的无序列表，并将其第一个子元素（即第一个列表项）移除。

结论

removeChild()函数可以帮助我们删除DOM节点。我们只需要先找到要删除的节点，然后将其作为参数传递给函数即可。