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");
See this live example in JSBin.