Skip to content

要从 DOM 中删除元素,可以使用 removeChild 方法。以下是一个简单的例子:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>删除DOM元素示例</title>
</head>
<body>

  <div id="parentElement">
    <p>要删除的段落</p>
    <p>保留的段落</p>
  </div>

  <script>
    // 获取父元素
    var parentElement = document.getElementById("parentElement");

    // 获取要删除的子元素
    var elementToRemove = parentElement.childNodes[1]; // 选择要删除的段落

    // 使用removeChild方法从父元素中删除子元素
    parentElement.removeChild(elementToRemove);
  </script>

</body>
</html>

在这个例子中,首先通过 document.getElementById 获取到父元素。然后,通过 childNodes 或其他方法获取到要删除的子元素。最后,使用 removeChild 方法从父元素中删除指定的子元素。

这将导致页面中的相应元素被移除。请注意,被删除的元素仍然存在于内存中,只是不再在页面上可见。如果需要完全销毁元素,可以考虑使用 remove 方法(在某些浏览器中支持):

javascript
elementToRemove.remove();

这样会更简洁,并且在一些现代浏览器中得到了更好的支持。