Remove nested class in pure JavaScript

Question

I am trying to remove class's some of them are nested.

I know it is possible to remove a class like this:

const coolDiv = document.querySelector('.my-div')
coolDiv.remove('container')

But how would I remove all container classes even the nested ones. For example how would I remove specific class="container" from the example below?

<div class='my-div container'>
    <div class='container'>
        <div class='container'>
        DIV
        </div>
    </div>
</div>

_"how would I remove **all**"_ but then _"how would I remove **specific**"_ - Is it all or only a specific one? — Andreas, Sep 21 '21 at 11:06
If all: `document.querySelectorAll(".my-div .container, .my-div.container").forEach(({ classList }) => classList.remove("container"));`. The selector `.my-div .container, .my-div.container` scopes elements to descendants of `.my-div` or `.my-div` itself, having the `container` class. — Sebastian Simon, Sep 21 '21 at 11:20

Simone Rossaini · Answer 1 · 2021-09-21T13:46:39.403

Yes you can with classList.remove

const coolDiv = document.querySelector('.my-div')
coolDiv.classList.remove('container')

<div class='my-div container'>
    <div class='container'>
        <div class='container'>
        DIV
        </div>
    </div>
</div>

Reference:

Element.classList

Edit after see for multiple remove:

const coolDivs = document.querySelectorAll('.my-div div')
coolDivs.forEach(coolDiv => {
  coolDiv.classList.remove('container')
});

<div class='my-div container'>
  <div class='container'>
    <div class='container dontdeleteme'>
      <div class='red'>
        DIV
      </div>
    </div>
  </div>
</div>

I add two more case with others class.

Reference:

Remove nested class in pure JavaScript

1 Answers1