How to Remove a Class from an Element in JavaScript

Author:
In JavaScript, removing a CSS class from an element is essential for dynamically updating the appearance of elements. Whether you're toggling between themes, changing styles based on user interaction, or resetting specific styles, removing a class is a common task. This post will show how to remove a class from an element using different methods.

Table of Contents

  1. Using classList.remove()
  2. Removing Multiple Classes
  3. Checking if a Class Exists Before Removing
  4. Using className Property (Legacy Method)
  5. Conclusion

1. Using classList.remove()

The classList.remove() method is the simplest and most effective way to remove a class from an element. It ensures the class is removed if it exists, without throwing an error if the class isn’t found.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .highlight {
      color: white;
      background-color: red;
      padding: 10px;
    }
  </style>
  <title>Remove Class Example</title>
</head>
<body>
  <h1 id="heading" class="highlight">Hello, World!</h1>
  <button onclick="removeHighlight()">Remove Highlight</button>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

function removeHighlight() {
  const heading = document.getElementById("heading");
  heading.classList.remove("highlight");
}

Explanation:

  • document.getElementById("heading") selects the <h1> element.
  • heading.classList.remove("highlight") removes the "highlight" class from the element.

Output:

When you click the "Remove Highlight" button, the .highlight class will be removed, and the styling associated with that class will no longer apply.

2. Removing Multiple Classes

You can remove multiple classes from an element by passing multiple class names to classList.remove().

Example:

function removeMultipleClasses() {
  const heading = document.getElementById("heading");
  heading.classList.remove("highlight", "bold-text", "extra-padding");
}

Explanation:

  • You can remove multiple classes at once by passing them as separate arguments to classList.remove().

Example:

<h1 id="heading" class="highlight bold-text extra-padding">Hello, World!</h1>

After calling the function, all three classes (highlight, bold-text, and extra-padding) will be removed.

3. Checking if a Class Exists Before Removing

To avoid unnecessary operations, you can first check whether the element has the class using classList.contains() before attempting to remove it.

Example:

function removeHighlightIfExists() {
  const heading = document.getElementById("heading");
  
  if (heading.classList.contains("highlight")) {
    heading.classList.remove("highlight");
  }
}

Explanation:

  • classList.contains("highlight") checks if the element has the "highlight" class. If it does, the class is removed. This method can be useful in complex scenarios where you want to ensure the class is present before attempting to remove it.

4. Using className Property (Legacy Method)

Before classList was widely supported, developers used the className property to remove classes. This method requires manipulating the entire class string, which can be error-prone, but may still be useful for compatibility with older browsers.

Example:

function removeHighlightLegacy() {
  const heading = document.getElementById("heading");
  heading.className = heading.className.replace("highlight", "").trim();
}

Explanation:

  • The className property holds the entire list of classes as a string. By using replace(), you remove the specific class ("highlight") from the class list.
  • Caution: This method is less efficient and can lead to issues if not handled carefully, as it involves manual string manipulation.

Example with Multiple Classes:

<h1 id="heading" class="highlight bold-text extra-padding">Hello, World!</h1>

function removeHighlightLegacy() {
  const heading = document.getElementById("heading");
  heading.className = heading.className.replace("highlight", "").trim();
}

The .highlight class is removed from the string, leaving "bold-text extra-padding" intact.

5. Conclusion

Removing a class from an element in JavaScript is straightforward with the classList.remove() method, which is the recommended approach for modern browsers. This method ensures that the class is removed efficiently and safely without needing manual string manipulation. However, for legacy browsers, you may need to work with the className property, though it's less reliable.

Key Points:

  • classList.remove(): The modern and efficient way to remove one or more classes.
  • Multiple Classes: You can remove multiple classes by passing them as arguments to classList.remove().
  • classList.contains(): You can check if a class exists before removing it, ensuring the operation is valid.
  • className: A legacy method that involves manual string manipulation and should be avoided if possible.

Related JavaScript Programs:

JavaScript: Add Two Numbers JavaScript: Subtract Two Numbers JavaScript: Multiply Two Numbers JavaScript: Divide Two Numbers JavaScript: Find the Remainder of Two Numbers JavaScript: Check if a Number is Even or Odd JavaScript: Find the Largest Among Three Numbers JavaScript: Find the Smallest Among Three Numbers JavaScript: Check if a Number is Prime JavaScript: Find the Factorial of a Number JavaScript: Print the Fibonacci Series JavaScript: Reverse a String JavaScript: Check if a String is a Palindrome JavaScript: Convert Celsius to Fahrenheit JavaScript: Convert Fahrenheit to Celsius JavaScript: Find the Area of a Circle JavaScript: Find the Perimeter of a Rectangle JavaScript: Sort an Array JavaScript: Find the Maximum and Minimum Element in an Array JavaScript: Find the Sum of Elements in an Array JavaScript: Merge Two Arrays JavaScript: Remove Duplicates from an Array JavaScript: Count the Occurrences of an Element in an Array JavaScript: Search for an Element in an Array JavaScript: Implement the Bubble Sort Algorithm JavaScript: Implement the Quick Sort Algorithm JavaScript: Implement the Insertion Sort Algorithm JavaScript: Check if a String Contains Another String JavaScript: Split a String into an Array of Words JavaScript: Join an Array of Words into a String JavaScript: Check if Two Strings are Anagrams JavaScript: Implement a Basic Calculator JavaScript: Get the Current Date and Time JavaScript: Implement a Countdown Timer JavaScript: Validate an Email Address JavaScript: Validate a Phone Number JavaScript: Swap Two Variables JavaScript: Count the Number of Words in a String JavaScript: Implement a Stack using Arrays / Objects JavaScript: Implement a Queue using Arrays / Objects JavaScript: Depth-First Search (DFS) on a Graph JavaScript: Breadth-First Search (BFS) on a Graph JavaScript: Implement a Binary Search Tree JavaScript: Detect a Cycle in a Linked List JavaScript: Implement the Tower of Hanoi Algorithm JavaScript: Search for an Element in a Binary Search Tree JavaScript: Implement a Priority Queue JavaScript: Implement an AVL Tree JavaScript: Implement a Circular Queue using Arrays JavaScript: Implement a Doubly Linked List JavaScript Function: Sum of Two Numbers JavaScript: Convert a String to Title Case JavaScript: Reverse a String without Built-in reverse() Function JavaScript: Reverse the Words in a Sentence without Built-in Function

Comments

Post a Comment

Leave Comment