Skip to main content

How to Remove All Classes from an Element in JavaScript

When manipulating the DOM, you sometimes need to completely reset an element's styling by removing all of its CSS classes. This is a common task when changing an element's state or applying a new theme. Similarly, you might want to remove all classes except for a specific base class.

This guide will teach you the simplest and most effective methods for both of these tasks using the className and removeAttribute() properties.

How to Remove All Classes from an Element​

There are two straightforward ways to clear all classes from an element.

The element.className property provides direct access to the element's class attribute as a string. By setting this property to an empty string (''), you can instantly remove all existing classes.

Problem: you have an element with multiple classes and want to clear them all. HTML:

<div id="box" class="container highlight is-active">My Box</div>

Solution:

const box = document.getElementById('box');

console.log('Before:', box.className); // Output: 'container highlight is-active'

// Set the className property to an empty string
box.className = '';

console.log('After:', box.className);  // Output: ''
note

This is the most common and idiomatic way to achieve this. It leaves the class attribute on the element but empties its value (<div id="box" class="">).

Method 2: Using removeAttribute()​

An alternative is to remove the class attribute from the element entirely using element.removeAttribute().

const box = document.getElementById('box');

console.log('Before, has class attribute:', box.hasAttribute('class')); // Output: true

// Remove the class attribute completely
box.removeAttribute('class');

console.log('After, has class attribute:', box.hasAttribute('class'));  // Output: false

Both methods achieve the same visual result, but setting className = '' is slightly more common. removeAttribute('class') is useful if you want to ensure the class attribute is completely absent from the DOM element.

How to Remove All Classes Except One​

A more specific task is to reset an element's classes to a single, specific class, removing all others. The most direct way to do this is to simply overwrite the className property with the one class you want to keep.

Problem: you want to remove all classes from an element except for a base class, like box.

<div id="box" class="box highlight is-active">My Box</div>

Solution: set the className property directly to the class name you wish to retain.

const box = document.getElementById('box');

console.log('Before:', box.className); // Output: 'box highlight is-active'

// Overwrite the entire class string with just the one you want to keep
box.className = 'box';

console.log('After:', box.className);  // Output: 'box'
note

This is a simple and highly readable one-liner. It's much cleaner than trying to loop through classList and remove classes individually.

Conclusion​

Managing an element's classes is a simple task with the right properties and methods.

  • To remove all classes from an element, the recommended method is to set its className property to an empty string: element.className = '';.
  • To remove all classes except for one, simply set the className property to the single class name you want to keep: element.className = 'my-single-class';.

These direct assignment methods are more efficient and readable than iterating with classList.remove() for bulk removal operations.

Table of Contents