安全移除dom节点应先确认节点存在及父级关系：remove()简洁无错但不返回节点；removechild()需显式指定父节点且返回被删节点，适用于移动或兼容旧环境。
JS 中安全移除节点，关键不是“选哪个方法”，而是“是否确认节点存在、是否明确其父级关系”。remove() 简洁直接，removeChild() 更底层可控——两者都能用，但适用场景和容错逻辑不同。
remove()：一步到位，适合已知目标节点
该方法直接作用于要删除的元素本身，无需关心它有没有父节点、是不是当前 DOM 的一部分。只要节点对象存在（哪怕已从 DOM 移除），调用 node.remove() 就不会报错，也不会影响后续执行。
- ✅ 优点：代码简洁、无须查父节点、自动处理空父级情况
- ⚠️ 注意：不返回被删节点，若需复用或记录，得提前保存引用
- ? 示例：
const btn = document.getElementById('submit-btn');<br> if (btn) btn.remove();
removeChild()：显式操作，适合需要控制权或复用节点
这个方法必须通过父节点调用，语法是 parent.removeChild(child)。它要求你明确知道子节点属于哪个父节点，且该父子关系当前有效。
- ✅ 优点：返回被移除的节点，可用于插入到别处；适合动态移动而非单纯删除
- ⚠️ 风险点：如果
child不是parent的子节点，或parent为null，会抛出 TypeError - ? 安全写法示例：
const child = document.querySelector('.item');<br> const parent = child?.parentNode;<br> if (parent && child) {<br> parent.removeChild(child);<br> }
什么时候该用哪个？看实际需求
不需要保留节点、也不需插入别处 → 优先用 remove()，少写判断更稳。
要删完再加到另一个容器、或需监听移除前状态、或兼容极老环境（IE 不支持 remove）→ 用 removeChild()，但务必校验父子关系。
- 删除按钮自身：
event.target.remove()最自然 - 批量删列表项：
list.querySelectorAll('li').forEach(el => el.remove()) - 删完还要塞进回收区：
const node = list.removeChild(item); archive.appendChild(node)
常见误操作与规避建议
很多“删不掉”或“报错”，其实源于节点状态判断缺失：
- ❌ 直接写
document.body.removeChild(header)—— 若header不在body下（比如在shadowRoot或已移除），就崩溃 - ✅ 改成：
header?.parentNode?.removeChild(header)或先用header.isConnected判断是否还在 DOM 树中 - ❌ 循环删子节点时用
for (let i = 0; i —— 每删一个，索引就乱了 - ✅ 改成：
while (parent.firstChild) parent.removeChild(parent.firstChild)或反向遍历
