js删除dom|极客笔记

js删除dom

在网页开发中，经常需要操作DOM（文档对象模型）来实现动态交互效果。有时候，我们需要删除页面上的某个元素，这时就需要用到JavaScript来删除DOM节点。

一、如何删除DOM元素

在JavaScript中，我们可以使用removeChild()方法来删除DOM元素。这个方法将从其父元素中移除指定的子节点。以下是一个简单的示例：

// 获取要删除的元素
var element = document.getElementById("myElement");

// 获取父元素
var parent = element.parentNode;

// 删除元素
parent.removeChild(element);

在上面的示例中，首先通过getElementById()方法获取要删除的元素，然后通过parentNode属性获取该元素的父元素，最后调用removeChild()方法删除元素。

二、示例

下面我们通过一个具体的示例来演示如何使用JavaScript删除DOM元素。假设有一个列表，点击列表项后删除该项。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除DOM元素</title>
</head>
<body>
<ul id="myList">
    <li onclick="deleteItem(this)">Item 1</li>
    <li onclick="deleteItem(this)">Item 2</li>
    <li onclick="deleteItem(this)">Item 3</li>
    <li onclick="deleteItem(this)">Item 4</li>
</ul>

<script>
function deleteItem(element) {
    // 获取父元素
    var parent = element.parentNode;

    // 删除元素
    parent.removeChild(element);
}
</script>
</body>
</html>

在上面的示例中，我们创建了一个包含四个列表项的无序列表。每个列表项绑定了一个onclick事件，当用户点击列表项时，会调用deleteItem()函数，并将被点击的列表项作为参数传入，然后在函数内部删除该列表项。