直接删DOM广告节点易导致功能异常，因广告与业务元素共享父节点或选择器；安全删除需先验证节点是否被JS/CSS引用，再用白名单组合选择器+存在性检查remove()，对动态广告须用MutationObserver监听并清理，PDF导出前应真实删除而非仅CSS隐藏。
直接删 DOM 节点会炸掉页面功能
很多用户看到广告就右键“Delete element”，刷新后发现按钮失灵、表格加载失败，甚至控制台报 Cannot read property 'style' of null。这不是浏览器问题，而是广告容器和业务逻辑共享了同一个父节点或 class 名。比如删掉一个 div[id="ad-banner"]，结果它和旁边的 div[id="order-form"] 共用同一个 wrapper，JS 里写了 document.getElementById('wrapper').children[1] 来取表单——删完广告，children[1] 就变成 undefined 了。
真正安全的前提是：先验证这个节点是否被 JS 或 CSS 读取过。打开 Chrome DevTools → Elements 面板 → 右键目标节点 → Break on → Attribute modifications，然后刷新页面。如果断点被触发，说明 JS 正在动态操作它；再全局搜索它的 id、class、data- 属性值，看是否出现在 querySelector、addEventListener 或 CSS 属性选择器里（比如 input[data-validated] + .error）。
用 querySelectorAll + remove() 批量删，但得加白名单兜底
remove() 是最干净的删除方式，但它不兼容 IE，且对空 NodeList 不报错也不提示。实际批量删广告时，不能只靠 class 名暴力匹配，否则可能误杀导航栏或分页组件。
- 优先用组合选择器缩小范围：
document.querySelectorAll('div[class*="ad"], [data-ad], .taboola-container, #right-sidebar-ad') - 删之前加个存在性检查：
if (el && el.parentNode) el.remove()，避免Cannot read property 'parentNode' of null - 对 iframe 广告要格外小心：
document.querySelectorAll('iframe[src*="doubleclick"], iframe[src*="googlesyndication"]')可以删，但别碰iframe[src*="youtube"]或含data-comments的 iframe - 删完建议手动触发一次关键操作（比如点“提交订单”），确认没副作用
MutationObserver 拦截动态重建的广告
发货100、打单工具这类页面，广告不是静态写死的，而是 JS 加载完数据后才 appendChild 进来的。这时候只执行一遍 remove() 没用，几秒后广告又回来了。
立即学习“前端免费学习笔记（深入）”；
必须用 MutationObserver 监听新增节点：
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1) {
// 检查新节点自身或其子树是否含广告特征
if (node.matches('div[class*="ad"], [data-ad]') ||
node.querySelector('div[class*="ad"], [data-ad]')) {
node.remove();
}
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
注意两点：一是 subtree: true 必须开，否则监听不到深层嵌套；二是不要在回调里反复调 querySelectorAll 全局扫描，性能差还容易漏——只检查刚插入的 node 及其直系后代即可。
PDF 导出前清理广告，别信纯 CSS 隐藏
用 wkhtmltopdf 或 Puppeteer 生成 PDF 时，很多人图省事加 --user-style-sheet ad-hide.css，里面写 .ad-banner { display: none !important; }。这看似简单，但 PDF 渲染引擎对 !important 支持不稳定，有些广告依然会露出来，尤其是带内联 style 的节点。
更可靠的做法是在生成 PDF 前，用 page.evaluate()（Puppeteer）或 document.write() 替换（服务端渲染场景）真正删掉节点：
await page.evaluate(() => {
// 先删明确的广告容器
document.querySelectorAll('div[id*="ad"], .ad-slot, [data-ad]').forEach(el => el.remove());
// 再处理 iframe 类广告（仅限已确认无业务内容）
document.querySelectorAll('iframe[src*="taboola"], iframe[src*="revcontent"]').forEach(ifr => ifr.remove());
});
删完别急着导出，用 page.screenshot() 截个图确认广告真没了——PDF 一旦生成，返工成本远高于多等两秒截图校验。
