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.

• javascript

3 Answers 3

On 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:

1. The length of the list is, at most, one (that would explain why x[1] and x[2] are undefined).
2. getElementsByClassName returns a live HTMLCollection 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] is undefined too).

Hope this clarifies things.