最常用方式是querySelectorAll配合forEach调用remove()，需注意NodeList无remove方法、IE不支持、事件监听器需手动解绑、避免内存泄漏及DOM未就绪等问题。
用 querySelectorAll + forEach 删除匹配的 div
这是最常用也最直观的方式：先选中所有目标 div，再逐个调用 remove()。前提是浏览器支持（Chrome 27+、Firefox 23+、Safari 10+、Edge 14+），且不需兼容 IE。
常见错误现象：querySelectorAll('div.some-class') 返回的是 NodeList，直接 .remove() 会报错 —— 因为 NodeList 本身没有该方法，必须遍历每个节点。
- 正确写法：
document.querySelectorAll('div.ad-banner').forEach(el => el.remove()); - 若选择器含空格或复杂属性（如
div[data-id="123"][style*="display"]），确保引号嵌套合法 - 删除后 DOM 立即更新，但绑定在这些
div上的事件监听器不会自动解绑，得手动清理
兼容 IE 时必须用 parentNode.removeChild()
IE 完全不支持 remove()，强行使用会静默失败或抛 TypeError。此时必须走传统路径：获取父节点，再调用 removeChild()。
容易踩的坑：el.parentNode 可能为 null（比如元素已被移出 DOM 或本身就是 document），不加判断直接调用会崩溃。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
if (el && el.parentNode) { el.parentNode.removeChild(el); } - 批量操作时别用正向
for循环：getElementsByClassName()返回的是动态HTMLCollection，边删边遍历会导致漏删 - 推荐反向遍历：
for (let i = els.length - 1; i >= 0; i--) { els[i].parentNode.removeChild(els[i]); }
删 div 前要确认它真被“选中”了
querySelectorAll 或 getElementsByClassName 返回空集合却不报错，容易误以为删成功了。实际可能是选择器写错、元素还没加载完、或目标在 shadow DOM 里。
使用场景：常用于广告位清理、旧模块下线、A/B 测试分支移除等。建议先在控制台手动执行选择器验证：
-
document.querySelectorAll('div#sidebar-ads').length—— 看是否大于 0 - 检查元素是否在
document.readyState === 'complete'后执行，避免 DOM 尚未就绪 - 若目标在 iframe 内，需先访问
iframe.contentDocument，再在其上下文中查询
删完之后内存可能没真正释放
DOM 节点被移除只是第一步。如果 JS 还持有对该节点的引用（比如存进了全局数组、闭包变量、或绑定过未清除的事件），它就不会被垃圾回收 —— 长期积累就是内存泄漏。
性能影响：尤其在单页应用中频繁增删大量 div（如列表滚动加载），残留引用会显著拖慢页面响应速度。
- 手动解绑事件：
el.removeEventListener('click', handler)，特别是复用的 handler 函数 - 清除定时器：
clearTimeout(el._timeoutId)、clearInterval(el._intervalId) - 清空自定义属性引用：
el._data = null、el.__vue__ = null（Vue 2 场景）
真正难的不是“怎么删”，而是删完后没人再悄悄拿着它的引用。尤其当多个模块协作时，一个 div 被 A 模块删了，B 模块还缓存着它并试图读取 offsetHeight，这时候既不报错也不渲染，问题最难定位。
