删除DOM

Last updated: ... / Reads: 52 Edit

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

<!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 方法（在某些浏览器中支持）：

elementToRemove.remove();

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

Comments

Make a comment

  • Index