使用 removechild 前须校验子节点存在且属于父节点，否则抛 notfounderror；推荐用 saferemovechild 函数防护，或更优的 child.remove() 方法（无需父节点、多次调用安全）。
使用 removeChild 移除子节点前，必须确保该子节点确实存在且属于目标父节点，否则会抛出错误。核心原则是：先校验，再移除。
确认子节点是否真实存在并属于当前父节点
直接调用 parent.removeChild(child) 时，如果 child 为 null、undefined，或已不属于 parent（比如已被其他代码移除、或根本不是它的子元素），就会报错 NotFoundError。
安全做法是加一层判断：
- 检查
child是否为有效节点（nodeType存在且不为undefined） - 检查
child.parentNode === parent，确保它当前确实挂载在该父节点下
推荐的安全移除写法（一行可读，带防护）
可以封装成一个简明函数，避免重复判断：
function safeRemoveChild(parent, child) {
if (child && child.parentNode === parent) {
parent.removeChild(child);
}
}
调用示例：
const container = document.getElementById('list');
const item = container.querySelector('.item:nth-child(2)');
safeRemoveChild(container, item); // 安全，即使 item 不存在或已脱离也不会报错
更现代的替代方案：直接用 remove() 方法
如果不需要兼容 IE，强烈建议改用子节点自身的 remove() 方法：
- 无需知道父节点，
child.remove()自动从其父级中移除自身 - 多次调用也不会报错（第二次调用时
child.parentNode已为null，但remove()内部已处理） - 代码更简洁，语义更清晰
示例：
const item = document.querySelector('.item');
if (item) item.remove(); // 安全、直观、无需查父节点
补充：用 querySelector 找节点时也要防空
很多问题其实源于获取子节点这一步就失败了。例如：
const badChild = parent.querySelector('.nonexistent');
parent.removeChild(badChild); // ❌ 报错：Cannot read property 'removeChild' of null
正确姿势是连同查找一起防护：
- 用可选链操作符（ES2020+）：
parent.querySelector('.target')?.remove(); - 或传统写法：
const el = parent.querySelector('.target'); if (el) el.remove();
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
