最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Remove specific class from group of elements without jquery - Stack Overflow

programmeradmin1浏览0评论

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 badges
Add a ment  | 

3 Answers 3

Reset to default 6

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.

发布评论

评论列表(0)

  1. 暂无评论