Remove specific class from group of elements without jquery

Question

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.

score 5 · Answer 1 · answered Oct 03 '17 at 17:17

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.

score 2 · Accepted Answer · answered Oct 12 '16 at 14:24

2

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>

answered Oct 12 '16 at 14:24

gurvinder372

66,980
10
72
94

I have another off topic question, i don't want to create an extra question for this, can someone tell me how I can add a class to one element? `x[2].className = "MyClass";` does not work – Black Oct 12 '16 at 14:44
1

@EdwardBlack use add method of classlist https://developer.mozilla.org/en/docs/Web/API/Element/classList#Methods – gurvinder372 Oct 13 '16 at 06:35

score 1 · Answer 3 · answered Oct 12 '16 at 14:33

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 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.

Remove specific class from group of elements without jquery

3 Answers3

Linked

Related