JavaScript删除节点|极客笔记

JavaScript删除节点

在JavaScript中，我们经常需要操作DOM（文档对象模型）来操作网页元素。在某些情况下，我们需要删除一个已经存在的节点，这时就需要使用删除节点的方法来实现。本文将详细讨论如何使用JavaScript删除节点。

1. 删除子节点

要删除一个节点的方式，首先需要获取到要删除的节点元素，然后通过其父节点调用 removeChild() 方法来删除该节点。

示例代码

// 创建一个 <div> 元素
var div = document.createElement("div");
div.innerHTML = "这是一个要删除的节点";

// 将 <div> 元素添加到 body 中
document.body.appendChild(div);

// 获取要删除的节点
var nodeToRemove = document.querySelector("div");

// 删除该节点
nodeToRemove.parentNode.removeChild(nodeToRemove);

运行结果

上述示例代码会创建一个包含文本 “这是一个要删除的节点” 的 <div> 元素，并将其添加到 <body> 中。然后，通过 document.querySelector() 方法获取到该 <div> 元素，并使用 removeChild() 方法将其从 DOM 中删除。

2. 删除自身节点

在某些情况下，我们需要删除节点本身而不是其子节点。这时可以直接调用 remove() 方法来删除自身节点。

示例代码

// 创建一个 <button> 元素
var button = document.createElement("button");
button.innerHTML = "点击删除自身节点";

// 将 <button> 元素添加到 body 中
document.body.appendChild(button);

// 添加点击事件，点击后删除自身节点
button.addEventListener("click", function() {
  this.remove();
});

运行结果

上述示例代码会创建一个按钮元素，并在按钮被点击时调用 remove() 方法删除自身节点。

3. 使用父节点删除节点

除了直接调用节点上的方法来删除节点外，还可以通过父节点调用 removeChild() 方法来删除指定节点。

示例代码

// 创建一个 <ul> 元素
var ul = document.createElement("ul");
ul.innerHTML = "<li>列表项1</li><li>列表项2</li><li>列表项3</li>";

// 将 <ul> 元素添加到 body 中
document.body.appendChild(ul);

// 获取要删除的节点
var liToRemove = document.querySelector("li");

// 通过父节点删除指定节点
liToRemove.parentNode.removeChild(liToRemove);

运行结果

上述示例代码会创建一个包含三个列表项的 <ul> 元素，并将其添加到 <body> 中。然后，通过 document.querySelector() 方法获取到其中的一个 <li> 元素，并通过其父节点调用 removeChild() 方法来删除该 <li> 元素。

4. 删除多个节点

除了删除单个节点外，我们也可以通过循环的方式删除多个节点。

示例代码

// 创建一个 <ul> 元素
var ul = document.createElement("ul");
ul.innerHTML = "<li>列表项1</li><li>列表项2</li><li>列表项3</li>";

// 将 <ul> 元素添加到 body 中
document.body.appendChild(ul);

// 获取所有的 <li> 节点
var liList = document.querySelectorAll("li");

// 循环删除所有的 <li> 节点
liList.forEach(function(li) {
  li.parentNode.removeChild(li);
});

运行结果

上述示例代码会创建一个包含三个列表项的 <ul> 元素，并将其添加到 <body> 中。然后，通过 document.querySelectorAll() 方法获取到所有的 <li> 元素，并通过循环调用其父节点的 removeChild() 方法来删除所有的 <li> 节点。