JS 删除 HTML 元素 - Javascript

有时候，我们需要从现有的 HTML 页面中删除某些元素。在 Javascript 中，我们可以使用多种方法来实现这一目标。在本文中，我们将了解这些方法，并提供一些例子。

使用 removeChild() 方法

这是最基本的方法，可以用来删除一个节点。

var element = document.getElementById("myDiv");
element.parentNode.removeChild(element);

我们首先使用 getElementById() 方法来定位元素，然后使用 parentNode 和 removeChild() 方法来删除它。这种方法非常简单，但需要注意的是，它只能用于删除子元素。

使用 replaceChild() 方法

replaceChild() 方法可以用于删除旧节点并插入新节点。这个方法的语法如下：

parent.replaceChild(newNode, oldNode);

其中，parent 是要操作的父元素，newNode 是将要插入的新节点，oldNode 是将要删除的旧节点。

以下是一个例子：

var newElement = document.createElement('div');
newElement.innerHTML = 'Hello World';
var oldElement = document.getElementById('myDiv');
oldElement.parentNode.replaceChild(newElement, oldElement);

这段代码会将 id 为 myDiv 的元素删除，并插入一个新的 div 元素，其中包含文本 "Hello World"。

使用 innerHTML 属性

如果我们只想删除元素的内容，而不是元素本身，那么可以使用 innerHTML 属性。

var element = document.getElementById("myDiv");
element.innerHTML = '';

在这个例子中，我们首先使用 getElementById() 方法来定位元素，然后将它的 innerHTML 属性设置为空字符串，这样元素就被清空了。

使用 outerHTML 属性

如果我们想删除整个元素及其内容，可以使用 outerHTML 属性。

var element = document.getElementById("myDiv");
element.outerHTML = '';

这个例子非常类似于 innerHTML 属性的例子，只是我们使用了 outerHTML 属性，这样整个元素都被删除了。

使用 remove() 方法

从 DOM 标准 Level 4 开始，所有现代浏览器都支持 Element 接口的 remove() 方法。这个方法非常简单，只需要调用它即可删除元素。

var element = document.getElementById('myDiv');
element.remove();

这个例子非常简单，只需要使用 getElementById() 方法获取要删除的元素，然后调用 remove() 方法即可删除元素。

以上是删除 HTML 元素的几种方法。你可以根据自己的需要选择其中的一种，或者结合使用多种方法。

参考文献

• MDN removeChild()
• MDN replaceChild()
• MDN innerHTML
• MDN outerHTML
• MDN remove()