I have multiple span
elements, I try to remove the class activeLang
.
How can I do this?
<div class="header_content_lang">
<span class="langNav">
...
</span>
<span class="langNav">
...
</span>
<span class="langNav activeLang">
...
</span>
</div>
I tried it like this, just like suggested here:
var x = document.getElementsByClassName(".activeLang");
[].forEach.call(x, function(el) {
el.classList.remove(".activeLang");
});
console.log(x[0]);
console.log(x[1]);
console.log(x[2]);
But output is "undefined" for all logs.
I have multiple span
elements, I try to remove the class activeLang
.
How can I do this?
<div class="header_content_lang">
<span class="langNav">
...
</span>
<span class="langNav">
...
</span>
<span class="langNav activeLang">
...
</span>
</div>
I tried it like this, just like suggested here:
var x = document.getElementsByClassName(".activeLang");
[].forEach.call(x, function(el) {
el.classList.remove(".activeLang");
});
console.log(x[0]);
console.log(x[1]);
console.log(x[2]);
But output is "undefined" for all logs.
Share Improve this question edited May 23, 2017 at 12:33 CommunityBot 11 silver badge asked Oct 12, 2016 at 14:21 BlackBlack 20.4k46 gold badges185 silver badges296 bronze badges3 Answers
Reset to default 6On modern, up-to-date browsers you can use forEach
on the HTMLCollection
(which inherits from NodeList
) returned by querySelectorAll
:
document.querySelectorAll(".activeLang").forEach(function(element) {
element.classList.remove("activeLang");
});
On old browsers, you need to polyfill it, which you can do like this:
if (!NodeList.prototype.forEach) {
Object.defineProperty(NodeList.prototype, "forEach", {
value: Array.prototype.forEach
});
}
You may also need a polyfill for classList
.
On truly obsolete browsers (IE8), you'd have to polyfill Array.prototype.forEach
(and classList
) first.
Or use any of the "array-like" looping mechanism described in this answer.
Remove .
from the classname
el.classList.remove("activeLang");
window.onload = function() {
var x = document.getElementsByClassName("activeLang");
console.log(x[0]); //will print the object
[].forEach.call(x, function(el) {
el.classList.remove("activeLang");
});
console.log(x[0]); //will no longer print the object
};
<div class="header_content_lang">
<span class="langNav">
...
</span>
<span class="langNav">
...
</span>
<span class="langNav activeLang">
...
</span>
</div>
There are a couple of typos in your code: you're putting a dot in the name of the class activeLang
and it's not necessary (in getElementsByClassName
and remove
).
Supposing you fixed the typo, you'd still get undefined in your console.log
. The reason is due to two things:
- The length of the list is, at most, one (that would explain why x[1] and x[2] are
undefined
). getElementsByClassName
returns a liveHTMLCollection
of found elements so, even though the list has one element before performing the remove of the class, the length will be zero when you actually remove it (therefore x[0] isundefined
too).
Hope this clarifies things.