Remove All Classes From An Element Using JavaScript

Remove all Classes from an Element using JavaScript

In this article, you will know how to remove all classes from an element using JavaScript. This is one of the most important skills when you work with elements, we will provide you two solutions: namely removeAttribute() and classList.remove().

Solutions to remove all classes from an element using JavaScript

Using removeAttribute()

The removeAttribute() method can remove an attribute from an element.

Syntax:

removeAttribute(name)

Parameter:

  • name: The name of the attribute to remove from the element that calls the method.

You can use the removeAttribute() method with the argument “class” to remove all classes from that element:

<html>
    <body>
    <h1 id = "learnshareit" class="learn share it">LearnShareIT</h1>
    <script>
        // Get elements with id = 'learnshareit'.
        let element = document.getElementById('learnshareit');
        console.log(element.className)
        
        // Remove all classes from this element.
        console.log(element.removeAttribute('class'));
        console.log(element.className)
    </script>
  </body>
</html>

Output: 

learn share it
undefined

The above example uses the method getElementById with the string ‘learnshareit’ as the parameter. This string indicates that we want to get an element with the id given. After that, we print out the class names of it before we remove all classes from it. The result after calling the method removeAttribute() has been resulted in undefined, which means all the classes have been removed successfully. 

Using classList.remove()

This method will remove specific classes from an element with the given class names.

Syntax:

classList.remove(classnames)

Parameter:

  • classnames: a comma-separated list of names of classes you want to remove from an element.

However, using this method requires you to use a three-dot operator (spread syntax) to unpack all the class names of the class to the argument of the method.

<html>
    <body>
    <h1 id = "learnshareit" class="learn share it">LearnShareIT</h1>
    <script>
        // Get elements with id = 'learnshareit'.
        let element = document.getElementById('learnshareit');
        console.log(element.className)
        
        // Remove all classes from this element.
        element.classList.remove(...element.classList);
        console.log(element.className)
    </script>
  </body>
</html>

Output: 

learn share it

In the above example, the result we received is different from the previous example in the second line; it prints out a blank link instead of an undefined. It is because the class of the element is empty but the attribute still exists. While in the first solution, the attribute “class” is also deleted from the element. However if you don’t understand the spread syntax that we have passed to the argument, just understand it as it will parse all the class names into a list such as learn,share,it (separated by commas) in order to make a list of all classes without knowing their names first. This will help you to avoid typing each name of the class to remove.

Summary

We have learned to remove all classes from an element using JavaScript using two different approaches. It would help if you considered that the first solution is better than the last one. If you have questions, you can leave a reply to us and we will answer soon. Otherwise, you can read more JavaScript articles here

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *