要从 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();
这样会更简洁,并且在一些现代浏览器中得到了更好的支持。