如何从所有元素中删除特定的类？

Question

如何从页面元素中删除给定的类？

示例：

<div class="fan light"> ... </div>
<div class="light"> ... </div>
<h3 class="seahorse light"> SomeHeading </h3>

我想从页面中所有的元素中删除类light！

我该如何使用jquery或javascript实现？

- M Reza Saberi

Answer 1

只需找到所有具有该类的元素，并将其删除：

$(".light").removeClass("light");

使用纯JavaScript：

var lights = document.getElementsByClassName("light");
while (lights.length)
    lights[0].className = lights[0].className.replace(/\blight\b/g, "");

(这取决于浏览器是否支持 .getElementsByClassName()。) 注意循环看起来有点奇怪，总是在元素列表的第0个元素上操作。那是因为像 .getElementsByClassName() 这样的API返回的列表是实时的 - 它们会根据DOM中的更改而改变。当从元素中删除类时，它不再位于具有该类名的元素列表中。因此通过从列表中的第一个元素中删除类，该元素消失了。最终列表将为空。（我一直认为这是一种奇怪的行为，它明显违反了最小惊奇原则，但没办法。）

最后评论中指出，新版浏览器（IE10+）支持DOM元素属性称为.classList。它是一个类名列表，还支持一些方便的方法。尤其是：

var lights = document.getElementsByClassName("light");
while (lights.length)
    lights[0].classList.remove("light");

- Pointy

---

而elem.classList.remove()的示例在哪里？ ;) - epascarello

@epascarello，我需要几年时间才能适应新潮的DOM API。我的大部分头脑都用于本能的IE6决策。 - Pointy

我和你一样，但是由于我的工作刚刚放弃了IE9的支持，我感到非常惊讶。看看所有那些以前我从未能使用的美妙功能！ - epascarello

Answer 2

使用 jQuery 查找所有类名为 light 的 DOM 元素并移除该类名。

$('.light').removeClass('light');

- Alex

Answer 3

简单的纯JavaScript代码：

[].forEach.call(document.querySelectorAll('light'), function (el) {
    el.classList.remove('hidden');
});

- Vasin Yuriy