removechild必须由父元素调用，子元素无此方法；正确用法是parent.removechild(child)，需确保child是parent的直接子节点，否则报错；推荐用child.remove()替代以避免父子关系误判。
removeChild 必须通过父元素调用
直接在子元素上调用 removeChild 会报错，因为这个方法属于父节点（Node 接口），不是子元素自己的方法。常见错误是写成 child.removeChild(child)，结果抛出 TypeError: child.removeChild is not a function。
正确做法是先拿到父元素，再调用它的 removeChild，并传入要删的子节点：
const parent = document.getElementById('container');
const child = document.querySelector('.item');
parent.removeChild(child);
- 如果
child不是parent的直接子节点，会报错NotFoundError - 调用后
child节点仍存在于内存中，只是从 DOM 树中移除，可后续重新appendChild - 不支持传入选择器字符串，必须是真实的
Node对象（比如document.getElementById()返回值）
删除前务必确认父子关系是否成立
很多实际问题出在“以为是子节点，其实不是”。比如动态插入后未重查父节点、使用了 innerHTML 导致引用失效、或节点已被其他逻辑移走。
安全做法是加一层校验：
if (child && child.parentNode === parent) {
parent.removeChild(child);
}
-
child.parentNode是最可靠的判断依据，比检查parent.contains(child)更精确（后者对后代也返回 true） - 避免只判
child.parentNode存在就调用 —— 它可能指向别的父节点 - 若不确定父节点，可用
child.remove()（现代浏览器支持，更简洁）替代
removeChild 和 child.remove() 的关键区别
removeChild 是传统 DOM 方法，需要显式指定父节点；而 child.remove() 是较新的 Element 方法，直接作用于子元素本身，语义更清晰。
-
remove()在 Chrome 27+/Firefox 23+/Edge 12+ 支持，IE 完全不支持 -
removeChild兼容所有支持 DOM Level 1 的浏览器（包括 IE6+） -
remove()会自动处理父节点查找，不会因父节点变更而意外失败 - 两者都触发
DOMNodeRemoved（已废弃）或mutation观察事件，但remove()不触发removedFromDocument
批量删除时别在遍历中直接 removeChild
用 for 遍历 childNodes 或 children 并逐个 removeChild，容易漏删或越界 —— 因为每次删除都会实时改变父节点的子节点列表长度和索引。
推荐做法是倒序遍历，或先收集再删：
// 倒序（安全）
for (let i = parent.children.length - 1; i >= 0; i--) {
parent.removeChild(parent.children[i]);
}
- 正序遍历时，删掉第 0 个后，原第 1 个变成新第 0 个，会被跳过
-
parent.innerHTML = ''更快，但会丢弃绑定的事件监听器和 JS 引用，慎用于复杂组件 - 如果只是清空，且不需要保留节点引用，
parent.replaceChildren()（现代 API）更语义化
真正容易被忽略的是：removeChild 不会自动清理事件监听器或自定义属性，如果节点曾被长期持有（比如存在闭包引用或全局 Map 中），它仍驻留内存，可能引发隐性内存泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
