How to remove one class from many elements in javascript

Question

I want to remove class name "active" from every element that have it in P1 and P2 on button click.I have added active class in javascript by classList.add()

let P1 = document.getElementsByClassName("P1")
let P2 = document.getElementsByClassName("P2")

In my HTML file I have

        <div id="p1Highlight">
            <div class="P1" id="m0">0</div>
            <div class="P1" id="m1">1</div>
            <div class="P1" id="m2">2</div>
            <div class="P1" id="m3">3</div>
            <div class="P1" id="m4">4</div>
            <div class="P1" id="m5">5</div>
            <div class="P1" id="m6">6</div>
            <div class="P1" id="m7">7</div>
            <div class="P1" id="m8">8</div>
            <div class="P1" id="m9">9</div>
            <div class="P1" id="m10">10</div>
            <div class="P1" id="m11">11</div>
            <div class="P1" id="m12">12</div>
            <div class="P1" id="m13">13</div>
            <div class="P1" id="m14">14</div>
            <div class="P1" id="m15">15</div>
            <div class="P1" id="m16">16</div>
            <div class="P1" id="m17">17</div>
            <div class="P1" id="m18">18</div>
            <div class="P1" id="m19">19</div>
            <div class="P1" id="m20">20</div>
        </div>
        <p>Player 2 Score</p>
        <div id="p2Highlight">
            <div class="P2" id="a1">1</div>
            <div class="P2" id="a2">2</div>
            <div class="P2" id="a3">3</div>
            <div class="P2" id="a4">4</div>
            <div class="P2" id="a5">5</div>
            <div class="P2" id="a6">6</div>
            <div class="P2" id="a7">7</div>
            <div class="P2" id="a8">8</div>
            <div class="P2" id="a9">9</div>
            <div class="P2" id="a10">10</div>
            <div class="P2" id="a11">11</div>
            <div class="P2" id="a12">12</div>
            <div class="P2" id="a13">13</div>
            <div class="P2" id="a14">14</div>
            <div class="P2" id="a15">15</div>
            <div class="P2" id="a16">16</div>
            <div class="P2" id="a17">17</div>
            <div class="P2" id="a18">18</div>
            <div class="P2" id="a19">19</div>
            <div class="P2" id="a20">20</div>
        </div>

I am giving them the class of "active" like this

function p1HighlightDisp(){

    if(player1Score < 20){
        player1Highlight = document.getElementById(`m${player1Score}`)

        player1Highlight.classList.add("active");
    }

}

function p2HighlightDisp() {

    if (player2Score < 20) {
        player2Highlight = document.getElementById(`a${player2Score}`)

        player2Highlight.classList.add("active");
    }

}

Know I want to remove class name of active from every element that has it on button click.How would I do that.

Does this answer your question? [How to remove a class from elements in pure JavaScript?](https://stackoverflow.com/questions/22270664/how-to-remove-a-class-from-elements-in-pure-javascript) — AGE, Aug 31 '21 at 16:32
the answers provided below + answers in the suggested duplicate, the recommended way is to use `classList` with `replace` see: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList — AGE, Aug 31 '21 at 16:33

J_K · Answer 1 · 2021-08-31T17:11:57.093

3

Try something like this:

var elements = document.getElementsByClassName("active");
for (let i = 0; i < elements.length; i++) {
    elements[i].classList.remove("active")
}

edited Aug 31 '21 at 17:11

answered Aug 31 '21 at 16:28

J_K

688
5
12

This doesn't work even after you fix the typos. `document.getElementsByClassName` [Warning: This is a live HTMLCollection. Changes in the DOM will reflect in the array as the changes occur. If an element selected by this array no longer qualifies for the selector, it will automatically be removed. Be aware of this for iteration purposes.](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) – Rob Moll Aug 31 '21 at 17:08
Try adding a quick snippet showing it work. It doesn't work because `document.getElementsByClassName` returns a live HTMLCollection. Check out the link in my previous comment. – Rob Moll Aug 31 '21 at 17:20

score 1 · Accepted Answer · answered Aug 31 '21 at 16:32

Just target the elements with the active class and remove the class from the classList of each element.

const button = document.querySelector('button');

button.addEventListener('click', handleClick, false);

function handleClick() {
  const active = document.querySelectorAll('.active');
  active.forEach(el => el.classList.remove('active'));
}

.active { color: red; font-weight: bold; }

<button>Remove active class</button>
<div id="p1Highlight">
  <div class="P1" id="m0">0</div>
  <div class="P1" id="m1">1</div>
  <div class="P1 active" id="m2">2</div>
  <div class="P1" id="m3">3</div>
  <div class="P1 active" id="m4">4</div>
  <div class="P1" id="m5">5</div>
</div>
<div id="p2Highlight">
  <div class="P2 active" id="a1">1</div>
  <div class="P2" id="a2">2</div>
  <div class="P2" id="a3">3</div>
  <div class="P2" id="a4">4</div>
  <div class="P2 active" id="a5">5</div>
</div>

Thanks alot for your answer.It solved my problem – Aug 31 '21 at 16:40 — , Aug 31 '21 at 16:40

Kunal Tanwar · Answer 3 · 2021-08-31T16:39:31.853

0

You can also use forEach

const isActive = document.querySelectorAll('.active');

isActive.forEach((element) => {
  // first check if active class exist or any element in your DOM have active class then remove it.
  if (element) {
    element.classList.remove('active');
  }
});

edited Aug 31 '21 at 16:39

answered Aug 31 '21 at 16:30

Kunal Tanwar

1,209
1
8
23

`document.querySelectorAll('active');` is incorrect. You should be targeting the _class_. – Andy Aug 31 '21 at 16:32
thanks for letting me know I changed it to `.active` – Kunal Tanwar Aug 31 '21 at 16:39

How to remove one class from many elements in javascript

3 Answers3