Estoy tratando de eliminar las clases, algunas de ellas están anidadas.
Sé que es posible eliminar una clase como esta:
const coolDiv = document.querySelector('.my-div') coolDiv.remove('container') Pero, ¿cómo eliminaría todas las clases de container , incluso las anidadas? Por ejemplo, ¿cómo eliminaría class="container" específico del ejemplo a continuación?
<div class='my-div container'> <div class='container'> <div class='container'> DIV </div> </div> </div>Sí, puedes con 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>Referencia:
Editar después de ver para eliminar múltiples:
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>Agrego dos casos más con otras clases.
Referencia: