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>
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:
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: