JS 删除 class 的几种写法，以及批量删除的坑

用 JavaScript 给元素去类名，最常见的是切换激活态、关闭弹窗时清理样式。新项目直接用 classList 就行。

classList.remove

const el = document.querySelector('.tab');
el.classList.remove('active');

// 一次删多个
el.classList.remove('active', 'open', 'loading');

要删的类不存在不会报错，这点比 removeAttribute 温和。

老代码里常见这种写法：

el.className = el.className.replace(/\bactive\b/g, '').trim();

问题在于 \b 对带连字符的类名不可靠，替换后还可能留下连续空格。更稳的是拆成数组再过滤：

el.className = el.className
  .split(/\s+/)
  .filter(c => c && c !== 'active')
  .join(' ');

缺点是整体重写了 class 属性，如果有 MutationObserver 监听，会多触发一次回调。

el.removeAttribute('class');

一次清掉所有类，适合整块重置，只删一个别用。

$('#box').removeClass('active');
$('#box').removeClass('active open');
$('#box').removeClass(); // 清空全部

项目里有 jQuery 时最省事，内部也是按空格拆分。

document.querySelectorAll('.item').forEach(item => {
  item.classList.remove('active');
});
e.target.classList.add('active');

classList 是原生操作，开销很小。真正的坑是用 for...in 遍历 NodeList，会遍历到 length 等属性，统一用 forEach 或 for...of。