用 querySelectorAll 精准定位并批量删除 DOM 中的 节点，优先使用 .remove() 逐个移除，避免误删；处理 引用型需先删 再清空容器，并加 data-removed 标记防重复执行。
用 querySelectorAll 定位所有目标
批量删 SVG 不是删“图片”，而是删 DOM 中的 节点。关键在精准定位：如果图标是内联 SVG（直接写在 HTML 里），可用 CSS 选择器匹配；如果是 
，则要按属性或父容器区分。
常见场景和写法：
- 删所有内联 SVG：
document.querySelectorAll('svg') - 删带特定 class 的图标：
document.querySelectorAll('svg.icon-azure, svg[data-service="storage"]') - 删所有通过
引用外部 sprite 的图标：document.querySelectorAll('svg use[href*="icons.svg"]')（注意：得先删，再删空的容器） - 避免误删：别用
document.getElementsByTagName('svg')——它会抓到里嵌套的（比如 group 嵌套），而querySelectorAll默认只选顶层匹配
用 .remove() 安全删除，别用 innerHTML = ''
逐个调用 .remove() 是最稳妥的方式。它直接从 DOM 树中解绑节点，不触发重排抖动，也不影响其他元素绑定的事件或状态。
错误做法示例：
const svgs = document.querySelectorAll('svg.icon-delete');<br>svgs.forEach(svg => svg.parentNode.innerHTML = ''); // ❌ 整个父容器内容清空，可能删掉文字、按钮等
正确写法：
const svgs = document.querySelectorAll('svg.icon-delete');<br>svgs.forEach(svg => svg.remove()); // ✅ 精准、无副作用
补充注意点：
- 如果 SVG 是通过 JS 动态插入的（比如用
createElementNS('http://www.w3.org/2000/svg', 'svg')），.remove()同样有效 - 不要在循环中修改
NodeList长度后还用索引访问（如svgs[i]）——querySelectorAll返回的是静态集合，但保险起见仍推荐forEach或for...of - 删完可加一句
console.log(`已移除 ${svgs.length} 个 SVG`)，方便验证是否命中预期
处理
很多项目用 SVG sprite + ，HTML 里实际是这样的结构：
<svg class="icon"><br><use href="/static/icons.svg#vm"></use><br></svg>
只删 节点， 容器还在，可能残留空白或 inline-style 影响布局。所以得两步走：
- 第一步：删所有匹配的
：document.querySelectorAll('svg.icon-sprite use').forEach(u => u.remove()) - 第二步：删掉现在为空的
容器：document.querySelectorAll('svg.icon-sprite:empty').forEach(svg => svg.remove()) -
:empty伪类只匹配**完全无子节点**（不含文本、注释、空格）的元素；如果 SVG 里有换行或空格，得先 trim：svg.innerHTML.trim() === ''再判断
服务端返回的 SVG 内容需额外防重入，避免重复执行
如果页面是 SPA，或通过 AJAX 加载含 SVG 的 HTML 片段（比如富文本渲染结果），批量删除逻辑可能被多次触发——比如用户切换 tab 又切回来，JS 又跑一遍，结果把刚加载的新图标也删了。
解决方法很简单：加一个标记属性，删过就打标，后续跳过：
document.querySelectorAll('svg.icon-auto-remove:not([data-removed])')<br> .forEach(svg => {<br> svg.remove();<br> svg.setAttribute('data-removed', '');<br> });
这个细节容易被忽略：没有标记机制的批量删除，在动态内容场景下等于“定时删新内容”。尤其当 SVG 是广告位、埋点容器或用户生成内容时，后果比想象中更隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
