webentwicklung-frage-antwort-db.com.de

Wie entferne ich eine Klasse aus Elementen in reinem JavaScript?

Ich würde gerne wissen, wie man alle Elemente mit den Klassennamen "widget" und "hover" auswählt und dann die Klasse "hover" aus diesen Elementen entfernt.

Ich habe den folgenden JavaScript-Code, der alle Elemente mit den Klassen "widget" und "hover" auswählt:

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

Dies scheint zu funktionieren und gibt so etwas aus (ohne Fehler):

[div#.widget...

Das Problem ist, dass beim Versuch, die Klasse "Hover" zu entfernen, eine Fehlermeldung angezeigt wird:

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

Dies gibt aus:

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

Kann mir jemand sagen, was ich falsch mache?


Bitte beachten Sie, dass ich es in jQuery arbeiten habe:

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

... aber ich suche eine Lösung in reinem JavaScript.

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

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

Sie können .classList In IE9 patchen. Andernfalls müssen Sie den .className Ändern.

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

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

Die .forEach() benötigt auch einen Patch für IE8, aber das ist sowieso ziemlich häufig.

70
cookie monster

Elemente finden:

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

Da elements ein live -Array ist und alle dom-Änderungen widerspiegelt, können Sie alle hover -Klassen mit einer einfachen while-Schleife entfernen:

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

elements ist ein Array von DOM-Objekten. Sie sollten so etwas tun

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

das heißt: Zählen Sie die Elementsammlung auf und rufen Sie für jedes Element in der Sammlung die remove-Methode auf

9
nemo

Das könnte helfen

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