Question

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

示例：

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

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

如何使用jquery或javascript进行此操作？

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 +）支持名为.classList的DOM元素属性。它是一个类名列表，另外它还支持一些方便的方法。特别是：

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

Answer 2

使用jQuery查找DOM class的所有light个元素，然后移除class。

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

Answer 3

简短的纯JavaScript：

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

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

3 个答案: