remove() method. If you’ve read How to add a class to an element already then you’ll realize that removing
a class is the exact same way, just in reverse.
Let’s look at the generic classList.remove() formula first — and then follow up with a practical example.
In the generic example above, we find the first HTML element on a page with the specified selector name (it could be an element selector, class selector, etc.) and store a reference to it with a variable.
Then we attach the classList property’s
remove() method to the element object (the variable) and specify the class we want to remove from it.
Practical classList.remove() example
To find and remove a class, we obviously need to find an element that has a class.
So what class should we remove?
To make our life easier, I just added a class called
italic to the paragraph you’re reading. As you can see, it makes the text italicized.
Let’s “un-italicize” the paragraph above with our newfound classList.remove technique:
And the result:
Note: I have the
italic class in my website’s CSS stylesheet, that’s why it works. The class looks like this:
Has this been helpful?
Let me know in the comments!
Or share it with your friends :-)