用 querySelectorAll 精准定位并批量删除 DOM 中的 节点，优先使用 .remove() 逐个移除，避免误删；处理 引用型需先删 再清空容器，并加 data-removed 标记防重复执行。
用 querySelectorAll 定位所有目标 <svg></svg> 元素
批量删 SVG 不是删“图片”，而是删 DOM 中的 <svg></svg> 节点。关键在精准定位：如果图标是内联 SVG（直接写在 HTML 里），可用 CSS 选择器匹配；如果是 <img src="icon.svg" alt="HTML如何批量删除页面中的特定svg图标代码" > 或 <use href="icons.svg#x"></use>，则要按属性或父容器区分。
常见场景和写法：
- 删所有内联 SVG：
document.querySelectorAll('svg') - 删带特定 class 的图标：
document.querySelectorAll('svg.icon-azure, svg[data-service="storage"]') - 删所有通过
<use></use>引用外部 sprite 的图标：document.querySelectorAll('svg use[href*="icons.svg"]')（注意：得先删<use></use>，再删空的<svg></svg>容器） - 避免误删：别用
document.getElementsByTagName('svg')——它会抓到<svg></svg>里嵌套的<svg></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`)，方便验证是否命中预期
处理 <use></use> 引用型图标时，先删 <use></use> 再清理空容器
很多项目用 SVG sprite + <use></use>，HTML 里实际是这样的结构：
<svg class="icon"><br> <use href="/static/icons.svg#vm"></use><br></svg>
只删 <use></use> 节点，<svg></svg> 容器还在，可能残留空白或 inline-style 影响布局。所以得两步走：
- 第一步：删所有匹配的
<use></use>：document.querySelectorAll('svg.icon-sprite use').forEach(u => u.remove()) - 第二步：删掉现在为空的
<svg></svg>容器：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 是广告位、埋点容器或用户生成内容时，后果比想象中更隐蔽。
