如何从纯 JavaScript 中的元素中删除类？

Question

我想知道如何选择类名为“widget”和“hover”的所有元素，然后从这些元素中删除类“hover”。

我有以下 JavaScript 代码，它选择类为“widget”和“hover”的所有元素：

var elements = document.getElementsByClassName('widget hover');
console.log(elements);

这似乎有效并输出类似的内容（没有错误）：

[div#.widget... 

问题是，如果我尝试删除“hover”类，则会收到错误：

var elements = document.getElementsByClassName('widget hover');
console.log(elements);
elements.classList.remove("hover");

输出：

[item: function]
length: 0
Uncaught TypeError: Cannot call method 'remove' of undefined 

谁能告诉我我做错了什么？

请注意，我可以在 jQuery 中使用它：

$('.widget.hover').removeClass('hover');

...但我正在寻找纯 JavaScript 的解决方案。

Answer 1

var elems = document.querySelectorAll(".widget.hover");

[].forEach.call(elems, function(el) {
    el.classList.remove("hover");
});

---

您可以将

.classList

修补到 IE9 中。否则，您需要修改

.className

。

var elems = document.querySelectorAll(".widget.hover");

[].forEach.call(elems, function(el) {
    el.className = el.className.replace(/\bhover\b/, "");
});

.forEach()

还需要 IE8 补丁，但这很常见。

Answer 2

现在是 2024 年了……保持简单，只需使用 es6

时代已经改变，现在最干净、最易读的方法是：

Array.from(document.querySelectorAll('.widget.hover')).forEach(
  (el) => el.classList.remove('hover')
);

如果你不支持箭头函数，那么只需这样转换：

Array.from(document.querySelectorAll('.widget.hover')).forEach(function(el) { 
    el.classList.remove('hover');
});

此外，如果您需要支持非常旧的浏览器，请使用 polyfil 作为

forEach

和

Array.from

，然后继续您的生活。

Answer 3

查找元素：

var elements = document.getElementsByClassName('widget hover');

由于

elements

是一个

live

数组并反映所有 dom 更改，因此您可以使用简单的 while 循环删除所有

hover

类：

while(elements.length > 0){
    elements[0].classList.remove('hover');
}

Answer 4

Elements 是 DOM 对象的数组。你应该做这样的事情：

for (var i = 0; i < elements.length; i++) {
   elements[i].classList.remove('hover');
}

枚举元素集合，并为集合内的每个元素调用

remove

方法

Answer 5

对于 ES6，可以使用 oneliners 通过多种方式完成此操作，其中使用扩展运算符

...

创建元素数组，并使用

map

运算符删除类：

与

querySelectorAll

：

[...document.querySelectorAll('.widget')].map(x => x.classList.remove('hover'));

与

getElementsByClassName

：

[...document.getElementsByClassName('widget')].map(x => x.classList.remove('hover'));

对于

querySelectorAll

，请注意使用

.widget

而不是

widget

。扩展运算符的另一种选择是使用

Array.from

，例如：

Array.from(document.querySelectorAll('.widget')).map(x => x.classList.remove('hover'));

Answer 6

这可能有帮助：

let allElements = Array.from(document.querySelectorAll('.widget.hover'));
for (let element of allElements) {
  element.classList.remove('hover');
}

Answer 7

我用的是一个简单的方法。 如果您始终在所需的循环次数中处理

[0]

，则可以将该过程应用于所有。

HTMLCollection(elements)

实时变化，所以将长度放入变量中。 (

l = element.length

)

for(var elements = document.getElementsByClassName('widget hover'), i = 0, l = elements.length; l > i; i++) {
  elements[0].classList.remove("hover");
}

Answer 8

var elems = document.querySelectorAll(".widget.hover");

 for(let elem of elems){
        elem.classList.remove('hover');
        }

Answer 9

Given 对我有用。

document.querySelectorAll(".widget.hover").forEach(obj=>obj.classList.remove("hover"));