Hello guys, are you looking for how to remove multiple classes from an element using JavaScript. We will provide you two solutions to do that: using removeAttribute() and classList.remove(). Let’s check it out as follows.
How to remove multiple classes from an element using JavaScript
Using className and split(), filter() and join()
The split() and join() methods are used to split a string into an array of substrings separated by a delimiter and concat the array into one string with a given separator. The syntax of those functions can be found here.
Syntax:
join(delimiter)
Parameter:
- delimiter: The separator between the substrings in an array to concat into one string
You can use the className attribute of an element to get the string of its class names separated by a whitespace and then use the split() method to get an array of class names and then filter out all the classes that you want to remove. After that we concat them again to replace it to className attribute:
<html> <body> <h1 id = "learnshareit" class="let us learn share it for human">LearnShareIT</h1> <script> // Get element with id = 'learnshareit'. let element = document.getElementById('learnshareit'); // Make an array of class names of the element let array = element.className.split(" "); console.log(array); // Remove the class that have the names "learn", "it" and "human" array = array.filter(v=>!["learn","it","human"].includes(v)); console.log(array); // Join the class names after removed into one String names = array.join(" "); // Change the class of this element using className element.className=array.join(" ") console.log(element.className) </script> </body> </html>
Output:
(7) ['let', 'us', 'learn', 'share', 'it', 'for', 'human']
(4) ['let', 'us', 'share', 'for']
let us share for
As you can see, the example above grabs an element with the id “learnshareit” given. Then, we change the className of the element to a string that no longer contains the names “learn”, “it” and “human”. It means that we have successfully removed those three classes from this element. If you don’t want to use this method, you can use the simpler one as follows.
Using classList.remove()
This remove() method will eliminate specific classes from an element that matches the given class names.
Syntax:
classList.remove(classnames)
Parameter:
- classnames: a list of names separated by commas that is the multiple classes you need to remove from the element.
<html> <body> <h1 id = "learnshareit" class="let us learn share it for human">LearnShareIT</h1> <script> // Get elements with id = 'learnshareit'. let element = document.getElementById('learnshareit'); console.log(element.className) // Remove classes "us", "let", "human", and "for" from this element. element.classList.remove("us","let","for"); console.log(element.className) </script> </body> </html>
Output:
let us learn share it for human
learn share it human
In the given example, we only have to use one line of code to remove multiple classes from the “learnshareit” element. Actually, this method is much simpler than the first one and therefore is commonly used. In addition, if you want to remove all the classes that an element may have, then you should consider taking a look at the article Remove all Classes from an Element using JavaScript.
Summary
In this article, we discussed two ways to remove multiple classes from an element using JavaScript. We highly recommend you use the second approach as it is the simplest and quickest. If you have any questions, please leave us a reply, we will answer as soon as possible. If you are working with JavaScript, you should check our tutorials here.
Maybe you are interested:
- Remove all Classes from an Element using JavaScript
- Remove all Event Listeners from an Element using JavaScript
- Remove the ID attribute from an Element using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R