删除元素：removeChild 与 remove —— 让 DOM 元素“消失”的两种魔法
大家好，欢迎来到今天的前端技术讲座！今天我们要聊的是一个非常常见的需求：如何从页面中删除一个 DOM 元素。在 JavaScript 中，我们有两种常用的方法来实现这个功能：removeChild 和 remove。它们虽然都能让元素“消失”，但背后的机制和使用场景却有所不同。接下来，我们就一起深入探讨这两种方法，看看它们的区别和各自的优缺点。
1. 什么是 removeChild？
removeChild 是一个经典的 DOM 操作方法，早在 ES5 时代就已经存在了。它属于父节点的 API，也就是说，如果你想删除一个元素，必须通过它的父节点来调用 removeChild 方法。
语法：
parentNode.removeChild(childNode);parentNode：你要操作的父节点。childNode：你想删除的子节点。
示例：
假设我们有一个简单的 HTML 结构：
<div id="parent">
<p id="child">我是要被删除的元素</p>
</div>我们可以这样删除 child 元素：
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);优点：
- 兼容性极佳：
removeChild是一个非常古老的 API，几乎所有的浏览器都支持它，包括那些已经退休的 IE 浏览器。 - 明确的父子关系：由于它是通过父节点调用的，因此你可以清楚地知道你是在哪个父节点下删除了某个子节点。
缺点：
- 代码冗长：你需要先获取父节点，然后再调用
removeChild，这使得代码看起来有些繁琐。 - 容易出错：如果你不小心传入了一个不是当前父节点的子节点，
removeChild会抛出错误。比如：
const wrongParent = document.createElement('div');
wrongParent.removeChild(child); // 这里会报错，因为 child 不是 wrongParent 的子节点2. 什么是 remove？
remove 是一个相对新一点的 API，最早出现在 ES6 中。它直接属于元素本身的 API，也就是说，你可以直接在目标元素上调用 remove 方法，而不需要通过父节点。
语法：
element.remove();element：你想删除的元素。
示例：
同样的 HTML 结构，我们可以通过更简洁的方式删除 child 元素：
const child = document.getElementById('child');
child.remove();优点：
- 简洁明了：你只需要获取到目标元素，然后直接调用
remove，代码量减少了一半，可读性也更好。 - 不易出错：你不需要关心父节点是谁，只要确保你拿到的是正确的元素即可。即使该元素没有父节点，
remove也不会抛出错误，而是默默地什么也不做。
缺点：
- 兼容性稍差：虽然现代浏览器（如 Chrome、Firefox、Edge 等）都支持
remove，但在一些非常老的浏览器（如 IE 11 及以下）中，它是不被支持的。如果你需要支持这些老浏览器，可能还需要 fallback 到removeChild。
3. removeChild vs remove：一场 PK
为了更直观地对比这两种方法，我们可以通过一个表格来总结它们的异同点：
| 特性 | removeChild |
remove |
|---|---|---|
| 调用方式 | 通过父节点调用 | 直接在目标元素上调用 |
| 代码复杂度 | 需要先获取父节点，代码较冗长 | 代码简洁，只需获取目标元素 |
| 易错性 | 容易传入错误的父节点，导致报错 | 不需要父节点，不容易出错 |
| 兼容性 | 几乎所有浏览器都支持 | 现代浏览器支持，IE 11 及以下不支持 |
| 性能 | 性能相当，几乎没有差异 | 性能相当，几乎没有差异 |
4. 实战演练：如何优雅地删除多个元素
有时候，我们需要一次性删除多个元素。这时候，removeChild 和 remove 的区别就更加明显了。我们来看一个例子：
假设我们有多个 li 元素，想要一次性删除它们：
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>使用 removeChild：
const list = document.getElementById('list');
const items = list.getElementsByTagName('li');
for (let i = 0; i < items.length; i++) {
list.removeChild(items[i]);
}注意：这里有一个坑！getElementsByTagName 返回的是一个 动态的 NodeList，当你删除第一个元素时，items 的长度会自动减少，导致后面的元素无法正确删除。解决方法是使用 Array.from 或者倒序遍历：
// 使用 Array.from 转换为静态数组
const itemsArray = Array.from(items);
itemsArray.forEach(item => list.removeChild(item));
// 或者倒序遍历
for (let i = items.length - 1; i >= 0; i--) {
list.removeChild(items[i]);
}使用 remove：
const items = document.querySelectorAll('#list li');
items.forEach(item => item.remove());可以看到，remove 在处理多个元素时更加简洁，不需要担心动态 NodeList 的问题，也不需要倒序遍历。
5. 小结
removeChild是一个经典的 DOM 操作方法，适合需要明确父子关系的场景，尤其是当你需要处理复杂的 DOM 树结构时。它的兼容性非常好，几乎可以在任何浏览器中使用。remove是一个更现代化的 API，代码简洁，易于使用，特别适合快速删除单个或多个元素。不过需要注意的是，它在一些非常老的浏览器中不被支持。
6. 写在最后
无论是 removeChild 还是 remove，它们都是我们在日常开发中常用的工具。选择哪种方法取决于你的项目需求和浏览器支持情况。如果你的项目需要支持非常老的浏览器，removeChild 是一个更安全的选择；如果你只关心现代浏览器，那么 remove 无疑是更好的选择。
希望今天的讲座对你有所帮助！如果你有任何问题，欢迎在评论区留言讨论。下次见！