How to remove class names from a DOM element using JavaScript?

#javascript

Remove class names from a DOM element

To remove a class name from a DOM element, you can use the remove() method in the classList property in an element using JavaScript.

Let's say you want to remove a class name called red from an h1 element.

// first get the reference to the h1 element
const h1 = document.querySelector("h1");

// remove red class name from h1 element
h1.classList.remove("red");

The method accepts valid class names as arguments.

If you want to remove multiple classes at the same time, you can pass those class names to the remove() method by passing them as arguments like this,

// first get the reference to the h1 element
const h1 = document.querySelector("h1");

// remove red, border-red, bg-yellow classnames
// from the h1 element at the same time
h1.classList.remove("red", "border-red", "bg-yellow");