CODEWITHSUNDEEP
javascripthtmlclass
user14773388
user14773388

Reputation:

How to remove one class from many elements in javascript

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.

Upvotes: 0

Views: 404

Answers (3)

J_K
J_K

Reputation: 671

Try something like this:

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

Upvotes: 3

Kunal Tanwar
Kunal Tanwar

Reputation: 1291

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');
  }
});

Upvotes: 0

Andy
Andy

Reputation: 63524

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>

Upvotes: 1

Related Questions