直接执行document.querySelectorAll('button').forEach(el => el.remove())可批量删除当前页面所有button元素，仅作用于DOM且刷新恢复，不删input类型按钮。
直接用浏览器开发者工具批量删 button 元素
如果你只是临时清理页面上的 <button></button>（比如调试、截图、测试渲染），最简单的方法是打开浏览器开发者工具（F12），在 Console 里执行一行 JS，立刻移除所有 button 元素：
document.querySelectorAll('button').forEach(el => el.remove());
这行代码会匹配所有 <button></button> 标签（包括 <input type="button"> 和 <input type="submit"> 不在内，它们是不同节点类型）。
- 只作用于当前页面 DOM，刷新即恢复
- 不删
<input>类型按钮，如需一并处理，改用：document.querySelectorAll('button, input[type="button"], input[type="submit"], input[type="reset"]').forEach(el => el.remove()); - 如果页面用了 Shadow DOM 或动态加载的 button，可能需要等元素挂载后再执行
用正则批量替换 HTML 源码中的 button 标签
如果你手上有 HTML 文件（比如本地 index.html），想永久删除所有 <button>...</button> 块，编辑器的「正则替换」比手动删快得多。注意：必须开启正则模式（通常叫 “Regex” 或 “.*” 按钮）。
立即学习“前端免费学习笔记（深入）”；
推荐匹配模式（兼顾单行和简单换行）：
<button\b[^>]*>[\s\S]*?<\/button>
-
\b防止误中<buttoned></buttoned>这类词；[^>]*匹配属性（如class="btn" id="x"） -
[\s\S]*?是非贪婪跨行匹配内容，比.*更安全（尤其含换行或嵌套标签时） - 某些编辑器（如 VS Code）对
[\s\S]支持更好；Sublime Text 可用(?s)<button>]*>.*?</button>（(?s)开启 dotall 模式） - ⚠️ 别用
<button>.*</button>这种简单写法——遇到多个 button 会“吞掉中间全部”，导致只删第一个和最后一个之间的整块
用 JavaScript 在页面加载时自动隐藏或移除 button（适合上线前清理）
如果要让生产环境某页面“看起来没 button”，但又不想改 HTML 源码（比如 CMS 生成页、第三方模板），可以在 或页面底部加一段脚本：
<script>
// 移除所有 button（含 disabled 状态）
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('button').forEach(b => b.remove());
});
</script>
- 放在
底部更稳妥，避免 DOM 尚未就绪 - 若只想隐藏而非删除（保留结构、方便后续恢复），把
b.remove()换成b.style.display = 'none' - 注意：部分框架（如 React/Vue）接管 DOM，直接操作可能被下一次 re-render 覆盖，此时应优先改组件逻辑而非硬删
为什么不能靠 CSS display:none 彻底“删除”按钮？
display: none 只是视觉隐藏，button 元素仍在 DOM 中，仍可被脚本访问、仍占用无障碍树（screen reader 会读）、仍可能响应事件（如果事件绑定在父级且用事件委托）。
所以真要「删除」，必须用 remove() 或从 HTML 源码中剔除。常见混淆点：
-
visibility: hidden：占位还在，只是看不见 -
opacity: 0：完全透明但可点击、可聚焦、对辅助技术可见 -
aria-hidden="true"：仅告诉读屏软件忽略，DOM 和布局照旧
真正删干净，只有两个路径：JS 的 remove()，或者编辑 HTML 源码 + 正则替换。其他都是障眼法，容易在后续交互或自动化测试中暴露问题。
