JavaScript classList.remove
last modified April 2, 2025
In this article, we explore the classList.remove method in
JavaScript. This method is essential for dynamic CSS class manipulation,
allowing developers to remove classes from DOM elements programmatically.
Basic Definition
The classList.remove method removes one or more class names from
an element's class attribute. It is part of the DOMTokenList interface
returned by the classList property.
This method provides a clean way to manipulate CSS classes without directly working with the className string. It automatically handles whitespace and duplicates, making it safer than string manipulation.
Removing a Single Class
This example demonstrates how to remove a single class from an element.
<!DOCTYPE html>
<html>
<head>
<title>Remove Single Class</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="text" class="highlight">This text will lose its highlight.</p>
<button onclick="removeHighlight()">Remove Highlight</button>
<script>
function removeHighlight() {
const textElement = document.getElementById('text');
textElement.classList.remove('highlight');
}
</script>
</body>
</html>
In this example, we have a paragraph with the 'highlight' class that gives it
a yellow background. The button click triggers the removal of this class using
classList.remove.
The method takes the class name as a string argument. If the class doesn't exist on the element, the method silently fails without throwing an error.
Removing Multiple Classes
This example shows how to remove multiple classes from an element at once.
<!DOCTYPE html>
<html>
<head>
<title>Remove Multiple Classes</title>
<style>
.big {
font-size: 2em;
}
.red {
color: red;
}
.border {
border: 2px solid black;
}
</style>
</head>
<body>
<div id="box" class="big red border">Styled Box</div>
<button onclick="stripStyles()">Remove Styles</button>
<script>
function stripStyles() {
const box = document.getElementById('box');
box.classList.remove('big', 'red', 'border');
}
</script>
</body>
</html>
Here we have a div with three classes that apply different styles. The button
click removes all three classes simultaneously by passing multiple arguments to
classList.remove.
Each argument represents a class to remove. The method processes them in order, and non-existent classes are simply ignored. This is more efficient than calling remove multiple times.
Conditional Class Removal
This example demonstrates removing a class only if it exists on the element.
<!DOCTYPE html>
<html>
<head>
<title>Conditional Removal</title>
<style>
.active {
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="panel">Content Panel</div>
<button onclick="toggleActive()">Toggle Active</button>
<script>
function toggleActive() {
const panel = document.getElementById('panel');
if (panel.classList.contains('active')) {
panel.classList.remove('active');
} else {
panel.classList.add('active');
}
}
</script>
</body>
</html>
This example shows a common pattern of toggling a class. We first check if the
class exists using classList.contains, then remove it if present.
This approach ensures we only remove the class when necessary. The
classList.toggle method could also be used here for simpler code.
Removing Classes After Animation
This example shows how to remove animation classes after the animation completes.
<!DOCTYPE html>
<html>
<head>
<title>Animation Class Removal</title>
<style>
.animate {
animation: fadeIn 1s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div id="message">Hello, World!</div>
<button onclick="animateMessage()">Animate</button>
<script>
function animateMessage() {
const msg = document.getElementById('message');
msg.classList.add('animate');
msg.addEventListener('animationend', function() {
msg.classList.remove('animate');
});
}
</script>
</body>
</html>
Here we add an animation class to trigger a fade-in effect, then remove it
after the animation completes by listening for the animationend
event.
This pattern prevents animation classes from persisting unnecessarily and allows the animation to be retriggered. It's a clean way to handle one-time animations.
Removing Classes from Multiple Elements
This example demonstrates removing a class from multiple elements at once.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Elements</title>
<style>
.selected {
outline: 2px solid blue;
}
</style>
</head>
<body>
<div class="item selected">Item 1</div>
<div class="item selected">Item 2</div>
<div class="item selected">Item 3</div>
<button onclick="clearSelection()">Clear Selection</button>
<script>
function clearSelection() {
const items = document.querySelectorAll('.item');
items.forEach(item => {
item.classList.remove('selected');
});
}
</script>
</body>
</html>
In this example, we select all elements with the 'item' class and remove the 'selected' class from each one. This demonstrates batch processing of elements.
We use querySelectorAll to get the NodeList, then iterate with
forEach. The classList.remove method works the same
way on each element in the collection.
Source
In this article, we have shown how to use classList.remove in
JavaScript. This method is fundamental for dynamic CSS class manipulation in
modern web development.
Author
List all JS DOM tutorials.