Warning: session_start(): open(/tmp/sess_67abf4a5b7dd1bd35708c3afdc424fb9, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
Remove multiple classes from an element using JavaScript - LearnShareIT

Remove multiple classes from an element using JavaScript

Remove multiple classes from an Element using JavaScript

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:

Leave a Reply

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