在 JavaScript 中，用 classList.remove() 移除隐藏类（如 hidden、is-hidden、d-none）需确保类名准确且存在；该方法不报错即使类不存在，可配合 contains() 判断或 add() 显示类使用。

在 JavaScript 中，用 classList.remove() 移除元素的隐藏样式类（比如 hidden、is-hidden 或 d-none）非常直接，关键是确保目标类名拼写准确，并且该类确实存在于元素的 class 属性中。

确认隐藏类名是什么

不同项目使用的隐藏类名可能不同，常见有：

• hidden（原生 HTML 属性语义类，或某些 CSS 框架）
• is-hidden（BEM 风格）
• d-none（Bootstrap 5+ 的 display: none 类）
• visually-hidden（仅视觉隐藏，仍对屏幕阅读器可见）

先检查元素当前的 class 列表，避免移错类名：

console.log(element.classList); // 查看所有已存在的类

立即学习“Java免费学习笔记（深入）”；

基础用法：remove() 移除一个或多个类

语法简单，传入字符串形式的类名即可：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

element.classList.remove('hidden');
element.classList.remove('d-none', 'is-hidden');

注意：remove() 不会报错即使类不存在，所以无需提前判断是否存在。

移除前可选：检查类是否存在（按需）

如果逻辑依赖“是否原本隐藏”，可以用 contains() 判断：

if (element.classList.contains('hidden')) {<br>
  element.classList.remove('hidden');<br>
  console.log('已取消隐藏');<br>
}

配合显示操作：移隐藏类 + 加显示类（常见场景）

有时移除隐藏类后，还需确保元素可见（例如清除其他冲突样式）：

// 移除隐藏类，再显式设置 display<br>
element.classList.remove('d-none');<br>
element.style.display = 'block'; // 或 'flex'、'inline' 等

更推荐纯 class 控制，例如预设一个 show 类：

element.classList.remove('d-none').add('show');