Remove all classes except first using pure JS

Question

I am trying to remove all classes except the fist one.

html:

<div class="note">1</div>
<div class="note">1</div>
<div class="note">1</div>
<div class="note">1</div>

Js:

for (var item of document.querySelectorAll("div.note(not:first-of-type"))) {
    item.classList.remove('note');
}

Snow · Accepted Answer · 2019-03-01 06:52:54Z

6

Use :not(:first-of-type):

for (var item of document.querySelectorAll("div.note:not(:first-of-type)")) {
    item.classList.remove('note');
}

.note {
  color: yellow;
}

<div class="note">1</div>
<div class="note">2</div>
<div class="note">3</div>
<div class="note">4</div>

answered Mar 1, 2019 at 6:52

Snow

4,1463 gold badges16 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack Bashford · Accepted Answer · 2019-03-01 07:00:31Z

1

Just loop and check the index like so:

Array.from(document.querySelectorAll("div.note")).forEach((div, ind) => {
    if (ind != 0) {
        div.classList.remove("note");
    }
});

answered Mar 1, 2019 at 7:00

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

ganesh phirke · Accepted Answer · 2019-03-01 07:04:22Z

1

you can simply use for loop also:

var array = document.querySelectorAll("div.note");
for(let i =1; i<array.length; i++){
    array[i].classList.remove('note')
}

answered Mar 1, 2019 at 7:04

ganesh phirke

4731 gold badge3 silver badges12 bronze badges