最稳妥的方式是用 document.querySelectorAll('audio, video').forEach(el => { if (!el.paused) el.pause(); el.remove(); }); 遍历并安全移除所有音视频元素，兼顾暂停播放与彻底删除。
用 JavaScript 删除所有 <audio></audio> 和 <video></video> 元素
直接删掉 DOM 中的音视频标签，最稳妥的方式是用原生 JS 遍历并移除。注意不是隐藏（display: none），而是真正从文档树中清除：
-
document.querySelectorAll('audio, video')能一次性选中全部，包括嵌套在 Shadow DOM 外的常规标签 - 必须用
forEach或传统for循环调用.remove()，不能用.removeChild()配合parentNode—— 因为.remove()更简洁且兼容现代浏览器（IE 不支持，如需兼容 IE，改用el.parentNode.removeChild(el)） - 如果页面动态插入了新
<audio></audio>或<video></video>（比如通过 AJAX 加载），这段脚本需在插入后再次执行，或配合MutationObserver
document.querySelectorAll('audio, video').forEach(el => el.remove());
用正则在 HTML 源码字符串里批量清除（服务端或构建时）
如果你处理的是 HTML 字符串（比如 SSR 输出、模板文件、静态 HTML 文件），不能依赖 DOM API，就得用正则匹配并替换。但要注意：正则无法完美解析 HTML，容易误伤或漏删。
- 基础正则：
/[\s\S]*?/gi—— 匹配自闭合或有结束标签的完整结构，但不处理单标签写法（如<video src="x.mp4"></video>） - 更保守的写法（推荐）：
/]*)?>[\s\S]*?/gi，能覆盖带属性、换行、注释等常见情况 - 必须加
g标志实现全局替换；i保证大小写不敏感（<audio></audio>也算） - 严重风险：如果
<audio></audio>内含<script></script>或未闭合的<div>，正则会跨标签错匹配，导致 HTML 结构损坏 <h3>用 CSS 隐藏而非删除？别混淆“不可见”和“不存在”</h3> <p>仅靠 CSS 让音视频标签不显示，**不会停止资源加载或播放行为**。很多开发者误以为加了 <code>display: none就安全了，其实：-
<audio autoplay></audio>即使display: none，仍可能触发自动播放（取决于浏览器策略和用户交互状态） - 浏览器仍会预加载
src或source指定的媒体文件，浪费带宽和内存 -
visibility: hidden或opacity: 0同样无效——元素仍在 DOM 中，JS 仍可访问.play()、.paused等属性 - 若目标是“彻底禁用”，CSS 方案不满足需求；仅适合临时视觉屏蔽
删除前检查是否正在播放，避免中断体验
如果页面允许用户主动播放音视频，粗暴
.remove()可能导致正在播放的内容突然中断，甚至引发onended或error事件异常。建议加一层判断：立即学习“前端免费学习笔记（深入）”；
- 遍历前先对每个
audio/video调用.pause()，再.remove()，防止音频卡顿或报错 - 注意：已暂停/未加载的元素调用
.pause()是安全的，无副作用 - 如果元素处于
networkState === 0（NETWORK_EMPTY）或尚未加载元数据，.pause()也不会报错
document.querySelectorAll('audio, video').forEach(el => { if (!el.paused) el.pause(); el.remove(); });真实场景中，最容易被忽略的是动态插入的媒体标签和 autoplay 行为残留。哪怕 DOM 初始没有<audio></audio>，后续 JS 插入一个带autoplay的标签，又没做清理，就会悄悄开始加载和播放。 -
