All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Remove Class In JavaScript

Last Updated : Mar 11, 2024

Remove Class In JavaScript

In this tutorial we will show you the solution of remove class in JavaScript, here we are going to show you example by using classList statement and remove() method.

The classList is a DOM property of javascript that allows for styling the CSS classes of an element and which is a read-only property that returns the names of the CSS classes. The remove() method is used to removes the selected child node from element.

Step By Step Guide On Remove Class In JavaScript :-

Here we defined three buttons ‘Remove Button Class, Remove Div Class, Button’ with separate id’s attribute ‘btn1,btn2,Ele1’, div element with id ‘divEle2’ and classes ‘ele2’.

In style block we used class ‘ele2’ for style by ‘background-color sets to rgb(233, 248, 135) with some padding likewise button ‘ele1’ styled by ‘background-color sets to aquamarine, padding and border-radius sets to 10px.

In script using id ‘Ele1,DivEle2’ we specifying div and button elements then removed classes attribute ‘ele1,ele2’ by classList.remove() method.

<!DOCTYPE html>
<html>
    <head>
        <title>REMOVE CLASS IN JAVASCRIPT</title>
    </head>
    <body>
        <style>
            .ele1{
                background-color: aquamarine;
                padding: 10px;
                width: fit-content;
                border-radius: 10px;
            }
            .ele2{
                background-color: rgb(233, 248, 135);
                padding: 10px;
                width: fit-content;
            }
        </style>
        <button id="btn1">Remove Button Class</button>
        <button id="btn2">Remove Div Class</button>
        <br><br><br>
        <button id="Ele1" class="ele1">Button</button>
        <br><br>
        <div id="divEle2" class="ele2">Hi this is second text</div>
        <script>
            document.getElementById('btn1').addEventListener("click",function(){
                document.getElementById('Ele1').classList.remove("ele1");
            })
            document.getElementById('btn2').addEventListener("click",function(){
                document.getElementById('divEle2').classList.remove("ele2");
            })
        </script>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. In style block we styling button by using class ‘ele1’ with ‘background-color: aquamarine; padding: 10px; width: fit-content; border-radius: 10px;’ properties and we sets div element background color to rgb(233, 248, 135), padding sets to 10px, width to fit-content.
  7. Here we defined button ‘Remove Button Class, Remove Div Class’ with id ‘btn1,btn2’ and button ‘Button’ defined with attributes id ‘Ele1’, class ‘ele1’, div element with id ‘divEle’ and class ‘ele2’ attributes.
  8. In script we referring buttons ‘Remove Button Class, Remove Div Class’ by id ‘btn1,btn2’ then which are appends with ‘addEventListener’ function for triggers click event to load function when user clicks on it.
  9. Within this we specifying button element by id ‘Ele1’ then which is appends with classList.remove(‘ele1’) for remove class ‘ele1’ from button element and div element id ‘divEle’ is appends with classList.remove(‘ele2’) for remove class ‘ele2’ from div element so after that when we executes this we can’t see the applied styles again.
  10. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to remove class from any element in javascript.

When we executes program on browser we can see ‘Remove Button Class, Remove Div Class’ buttons and Button, div element with text ‘Hi this is second text’ when user clicks on ‘Remove Button Class’ button then button styles removed from button likewise when user clicks on ‘Remove Div Class’ button then div element style gets removed from them because of classes absent.

I hope this tutorial on remove class in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪