最省事的删元素方法是用开发者工具右键选Delete element，它直接从DOM移除且不触发JS逻辑；但仅限临时清理，刷新即恢复，需防误删父容器和残留副作用。
用开发者工具右键直接删元素最省事
Chrome/Firefox 的 Elements 面板里，右键任意元素 → 选 Delete element，立刻从 DOM 中移除，不触发 JS 逻辑、不走事件监听器，适合临时清理干扰项。但注意：这只是 DevTools 里的操作，刷新页面就恢复；如果元素绑了全局事件或定时器，删完可能留下残留副作用。
常见误操作是选错层级——比如想删弹窗内容却删了整个 .modal 容器，结果发现关闭按钮也没了。建议先点中目标元素再右键，别图快直接在树状结构里点父节点。
批量隐藏元素别硬写 CSS，用 Styles 面板勾选/取消 display: none
在 Elements 面板右侧的 Styles 标签页里，找到带删除线的 display: none，点击左侧复选框就能即时启用或禁用该规则。这个动作不改源码、不污染内联样式，且能绕过高优先级选择器（比如 .sidebar.is-collapsed .nav-item 这种嵌套规则）。
容易踩的坑：
- 直接双击 style 属性手动加 display: block，大概率被外部 CSS 覆盖，无效
- 对多个元素挨个操作太慢，可用 Console 批量执行：$$('[hidden], [style*="display: none"]').forEach(el => el.style.display = 'block')，但仅限临时查看，不能替代 Styles 面板的精准控制
用 JavaScript 临时删隐藏元素要避开三类节点
真要写脚本批量删，querySelectorAll('[hidden]') 或 querySelectorAll('[style*="display: none"]') 都不可靠。前者会误杀 Vue/React 动态控制显隐的容器，后者根本匹配不到 class 控制的隐藏状态。
稳妥做法是结合 getComputedStyle 判断，但必须过滤：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
iframe、video、canvas等媒体元素——可能正在加载或解码 - 带
data-persist、data-keep-alive的节点——框架缓存标记，删了丢状态 - 父级有
aria-hidden="false"或tabindex="0"的元素——读屏器依赖它们
删之前还得手动清理绑定的事件、setTimeout、MutationObserver，否则容易内存泄漏。
display: none 元素怎么快速调出来看结构
不是所有“隐藏”都等于“删掉”。很多布局问题出在 display: none 元素意外撑开父容器，或者子元素被继承影响。这时候别急着删，先确认它是否真的该消失。
最快方式是在 Elements 面板里右键目标元素 → Break on → attribute modifications，就能抓到是谁在动态改它的 display 值。比盲猜 CSS 规则或翻 JS 源码高效得多。
真正麻烦的是那些由 JS 动态计算后设为 display: none 的元素——它们没写死在 HTML 里，也不在初始 CSS 中，得靠断点或 getComputedStyle 实时抓取才看得见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
