How to remove a class from an element in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Removing CSS classes from elements dynamically enables state changes, interactive styling, and responsive design through JavaScript manipulation. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented dynamic class removal in thousands of interactive components for modal closures, active states, and UI transitions. From my expertise, the most effective approach is using the classList.remove() method for safe and reliable class management. This method provides clean class removal without affecting other classes and handles non-existent class removal gracefully.
Use classList.remove() method to safely remove CSS classes from DOM elements.
// Get element and remove class
let element = document.getElementById('my-element')
element.classList.remove('active')
// Remove multiple classes
element.classList.remove('highlighted', 'animated', 'visible')
// Remove class with conditional logic
let modal = document.querySelector('.modal')
if (modal && modal.classList.contains('open')) {
modal.classList.remove('open')
}
// Remove class from multiple elements
let buttons = document.querySelectorAll('.btn')
buttons.forEach(button => {
button.classList.remove('disabled')
})
// Remove class on event
document.getElementById('close-btn').addEventListener('click', () => {
let sidebar = document.querySelector('.sidebar')
sidebar.classList.remove('open', 'expanded')
})
The classList.remove() method removes the specified class from the element’s class list without affecting other classes. It safely handles attempts to remove non-existent classes and supports removing multiple classes in a single call. Use contains() to check if a class exists before removal when needed.
Best Practice Note:
This is the same class removal approach we use in CoreUI JavaScript components for clean state management.
Combine with classList.contains() to check class existence when implementing toggle functionality for better user experience.
