Javascript 从 DOM 中删除元素

在 Javascript 中，我们可以使用 DOM （Document Object Model） 来操作网页上的元素。也可以通过删除元素来修改网页的内容。本文将介绍如何使用 Javascript 从 DOM 中删除元素。

1. 找到需要删除的元素

首先，我们需要找到需要删除的元素。我们可以使用以下方法：

1.1 通过 ID 查找

使用 getElementById 方法可以根据元素的 ID 查找元素。

const element = document.getElementById('id-of-element');

1.2 通过类名查找

使用 getElementsByClassName 方法可以根据元素的类名查找元素。如果存在多个相同类名的元素，该方法将返回一个 HTMLCollection 集合。

const elements = document.getElementsByClassName('class-of-element');

1.3 通过标签名查找

使用 getElementsByTagName 方法可以根据元素的标签名查找元素。如果存在多个相同标签名的元素，该方法将返回一个 HTMLCollection 集合。

const elements = document.getElementsByTagName('tag-name-of-element');

1.4 通过选择器查找

使用 querySelector 方法可以根据选择器查找元素。如果存在多个匹配的元素，该方法将返回第一个匹配的元素。

const element = document.querySelector('selector-of-element');

2. 移除元素

在找到需要删除的元素后，我们可以使用以下方法将其从 DOM 中移除：

2.1 使用 removeChild 方法

如果需要删除的元素是其父元素的子元素，我们可以使用 removeChild 方法将其从 DOM 中移除。

const parent = document.getElementById('parent-element');
const child = document.getElementById('child-element');
parent.removeChild(child);

2.2 使用 remove 方法

如果需要删除的元素是一个具有父节点的子节点，我们可以使用 remove 方法将该元素从 DOM 中删除。

const element = document.getElementById('element-to-remove');
element.remove();

3. 总结

在本文中，我们介绍了如何使用 Javascript 从 DOM 中删除元素。我们可以使用 getElementById、getElementsByClassName、getElementsByTagName 或 querySelector 方法找到需要删除的元素，然后使用 removeChild 或 remove 方法将其从 DOM 中移除。