Vanilla JS 删除元素

在 Web 开发中，经常需要通过 JavaScript 动态地添加、修改或删除 HTML 元素。本文将介绍如何使用 vanilla JS（纯 JavaScript）删除元素。

通过父元素删除子元素

使用 removeChild() 方法可以从其父元素中删除一个元素。首先需要找到待删除元素的父元素，然后调用 removeChild()，传入待删除元素作为参数即可。

const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.removeChild(child);

其中，parent 是待删除元素的父元素，child 是待删除元素本身。

直接删除元素

如果你已经拥有待删除元素的引用，可以直接调用 remove() 方法来删除元素。

const el = document.getElementById("el");
el.remove();

批量删除元素

如果需要删除一组元素，可以将它们放在一个数组中，然后使用 forEach() 方法循环调用 remove() 或 removeChild() 方法。

const elements = document.querySelectorAll(".items");
elements.forEach(el => el.remove());

其中，elements 是待删除元素的数组，.items 是待删除元素共有的类名。

总结

本文介绍了通过 vanilla JS 删除元素的三种方法，分别是通过父元素删除子元素、直接删除元素、批量删除元素。使用这些方法，可以轻松地完成动态地修改 HTML 元素的任务。