Remove a CSS class from all elements in Javascript

In order to remove a CSS class from all the HTML elements we can use a mix of the Javascript methods querySelectorAll() and classList.remove().

Let's say we want to build the following Javascript example:
Remove a CSS class from all elements in Javascript

Basically, our app will have two functionalities:

  • removing a CSS class from all elements on the page
  • removing a CSS class just from all children of a given element

If you want to skip ahead here is the full code of this app and here is the live example.

Let's start with the HTML setup:

<div>
        Lorem ipsum dolor sit 
        <span class="red">Temporibus</span>, illo id quas 
        magnam cum <span class="red">dignissimos</span> reiciendis.</div>
<div class="blue-container">
        <h4>🟦 The blue container</h4>
        <ul>
            <li class="red">Item one</li>
            <li>Item two</li>
            <li class="red">Item three</li>
        </ul>
</div>

If we want to remove the .red class from all the elements on this page we will need to add a button, that will call the Javascript function:

<button onclick="removeClassFromAllElements()">
  Remove .red the 📄 all the page
</button>

And the code of the removeClassFromAllElements() function:

const removeClassFromAllElements = () => {
  const allElements = document.querySelectorAll('*')
  allElements.forEach(el => el.classList.remove('red'))
}

One nice feature of the querySelectorAll() method is that we can use it also on a particular element thus making it very easy to remove a CSS class just from a given element.

Therefore can add a new button:

<button onclick="removeClassFromOneElement()">
  Remove .red the 🟦 container
</button>

And here is the implementation of the removeClassFromOneElement() function:

const removeClassFromOneElement = (target) => {
  target = target || document.querySelector('.blue-container')
  const allElements = target.querySelectorAll('*')
  allElements.forEach(el => el.classList.remove('red'))
}

That's it! You can see the GitHub repo for this example.

PS: speaking of querySelectorAll() I've also written this article about how to use querySelectorAll() with wildcards. Go check it out.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


2 Replies

Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X