javascript删除子元素

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

JavaScript中可以使用removeChild()方法来删除子元素。removeChild()方法是在父元素上调用的，用于从父元素中删除指定的子元素。

我们需要获取到要删除的子元素以及其父元素。可以使用getElementById()方法来获取父元素，然后使用querySelector()方法或者getElementsByTagName()方法来获取子元素。接下来，我们可以使用removeChild()方法将子元素从父元素中删除。

下面是一个示例代码，演示了如何使用JavaScript删除子元素：


<!DOCTYPE html>
<html>
<body>
<div id="parent">
  <p id="child1">子元素1</p>
  <p id="child2">子元素2</p>
  <p id="child3">子元素3</p>
</div>
<button onclick="removeChildElement()">删除子元素</button>
<script>
function removeChildElement() {
  var parent = document.getElementById("parent");
  var child = document.getElementById("child2");
  parent.removeChild(child);
}
</script>
</body>
</html>

在上面的示例中，我们首先使用getElementById()方法获取到父元素和要删除的子元素。然后，通过调用removeChild()方法，将子元素child2从父元素parent中删除。我们可以在HTML代码中添加一个按钮，点击按钮时调用removeChildElement()函数来执行删除操作。

除了使用removeChild()方法，还可以使用parentNode属性来删除子元素。parentNode属性返回指定元素的父节点。通过将子元素的parentNode属性设置为null，可以将子元素从父元素中删除。

下面是一个使用parentNode属性删除子元素的示例代码：


<!DOCTYPE html>
<html>
<body>
<div id="parent">
  <p id="child1">子元素1</p>
  <p id="child2">子元素2</p>
  <p id="child3">子元素3</p>
</div>
<button onclick="removeChildElement()">删除子元素</button>
<script>
function removeChildElement() {
  var child = document.getElementById("child2");
  child.parentNode.removeChild(child);
}
</script>
</body>
</html>

在上面的示例中，我们直接使用child.parentNode.removeChild(child)来删除子元素child2。

需要注意的是，删除子元素后，子元素的引用仍然存在于内存中。如果不再需要这个子元素，可以将其设置为null，以便浏览器在内存回收时可以释放相应的资源。

总结一下，JavaScript中可以使用removeChild()方法或者parentNode属性来删除子元素。通过获取父元素和子元素的引用，然后调用相应的方法，即可实现删除子元素的功能。删除子元素可以帮助我们动态地修改网页的内容和结构，提升用户体验。

javascript删除子元素

相关阅读