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

查找元素：

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

由于elements是live数组且反映了所有dom更改，因此您可以使用简单的while循环删除所有hover类：

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

Answer 3

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

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

ie：枚举元素集合，并为集合中的每个元素调用remove方法

Answer 4

现在是2020年...保持简单。

时间已经改变，现在最干净，最易读的方式是：

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

如果您不支持箭头功能，则只需将其转换为这样：

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

另外，如果您需要支持非常古老的浏览器，请对forEach和Array.from使用polyfil，然后继续生活。

Answer 5

对于 ES6，这可以通过使用 one liners 的几种方式来完成，在这种情况下，您可以使用展开运算符 ... 创建一个元素数组，并使用 { 删除类{1}} 运算符：

使用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

Answer 6

这可能会有所帮助

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

Answer 7

吉文为我工作。

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

Answer 8

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

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

Answer 9

我使用了一个简单的方法。如果您始终在所需的循环次数中处理 [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");
}

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

9 个答案:

现在是2020年...保持简单。