How to Remove a CSS Class from an Element Using JavaScript (Without jQuery)?

How to Remove CSS Class from Element Using JavaScript (Without jQuery)

Question: Can someone guide me on how to remove a class from an HTML element purely with JavaScript, excluding jQuery?

Answer:

The preferred approach is to utilize the classList property. It is widely supported across modern browsers.

To remove a class, simply use the following syntax:

ELEMENT.classList.remove("CLASS_NAME");

Example:

Consider a button element with a class named "red" to demonstrate this concept:

<button>

When the button is clicked, the following JavaScript code removes the "red" class from an element with the ID "el":

remove.onclick = () => {
  const el = document.querySelector('#el');
  el.classList.remove("red");
};

This action alters the CSS styles applied to the element with the "el" ID, effectively removing the reddish background:

.red {
  background: red
}

The above is the detailed content of How to Remove a CSS Class from an Element Using JavaScript (Without jQuery)?. For more information, please follow other related articles on the PHP Chinese website!