remove()方法可直接删除自身节点但不兼容IE；需fallback至removeChild()并校验parentNode；它不销毁事件监听器或JS属性，批量删除应避免静态NodeList陷阱。
remove() 方法能直接删掉自己，但不兼容 IE
HTML 元素原生的 remove() 方法确实可以直接从 DOM 树中删除调用它的节点本身，不需要先找父节点再调用 removeChild()。但它在 IE 所有版本中完全不可用，包括 IE11 —— 这是实际项目中最常踩的坑。
- 写法极简：
element.remove()，没有参数，也不返回值 - 等价于：
element.parentNode.removeChild(element)，但更安全（不用判空parentNode） - 会同步触发
DOMNodeRemoved事件（已废弃）和mutationobserver回调 - 如果元素已被移除或不在文档中，调用不会报错，静默失败
IE 或老旧环境必须降级用 removeChild()
只要需要支持 IE，就不能只靠 remove()。得手动 fallback，核心是确保 parentNode 存在且支持 removeChild：
if (typeof element.remove === 'function') {
element.remove();
} else {
if (element.parentNode) {
element.parentNode.removeChild(element);
}
}
- 不能只检测
element.remove是否为函数，还要防parentNode为null（比如元素刚创建未挂载） - 不要用
element.parentElement替代parentNode，因为removeChild要求的是父节点（可能是 DocumentFragment），而parentElement只返回 Element 类型 - 某些框架（如 Vue）的
v-if或key变更也会触发内部remove()，但那是框架封装层，不影响你手写逻辑
remove() 不会清除绑定的事件监听器或数据属性
remove() 只负责从 DOM 树断开节点，它不管 JavaScript 层的引用关系。这意味着：
- 用
addEventListener绑的事件监听器不会自动销毁，如果还有变量引用该元素，就存在内存泄漏风险 -
element.dataset.xxx、element.myCustomProp = 123这类 JS 属性依然存在，只是节点不可见了 - 如果你依赖 MutationObserver 监听删除动作，要留意：IE 下只能监听
childList变化，且需手动比对removedNodes
用 querySelectorAll + forEach 删除多个匹配节点时注意 NodeList 是静态的
想删掉所有 class 为 to-delete 的元素？别这么写：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.to-delete').forEach(el => el.remove());
这看起来没问题，但若页面里有其他脚本在 remove() 过程中又动态插入了同名节点，它们不会被删——因为 querySelectorAll 返回的是静态 NodeList，生成后就固定了。
- 真正保险的做法是用
while循环反复取第一个并删，直到为空：while (el = document.querySelector('.to-delete')) el.remove(); - 或者转成数组再遍历：
[...document.querySelectorAll('.to-delete')].forEach(el => el.remove());，但要注意展开操作在低版本 Safari 中可能不支持 - 批量删除大量节点时，性能差异不大；但逻辑上“删干净”比“删快”更重要
