JavaScript Remove Class From DIV
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this tutorial we will show you the solution of JavaScript remove class from div, 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 JavaScript Remove Class From DIV :-
Here we defined button ‘Click Here’ with id attribute ‘btn’, div element with id ‘divEle’ and classes ‘ele brd’.
In style block we used class ‘ele’ for make div element to square box with ‘aquamarine’ color and ‘brd’ class used to sets border which has 5px width, solid style, red shade rgb color then in script we added addEventListener() method for finds click event when occur.
There we specifying classList for select class ‘brd’ then removed from parent class attribute by remove() method.
<!DOCTYPE html>
<html>
<head>
<title>REMOVE CLASS DIV</title>
</head>
<body>
<style>
.ele{
background-color: aquamarine;
width: 100px;
height: 100px;
}
.brd{
border: 5px solid rgb(247, 75, 75);
}
</style>
<button id="btn">Click Here</button>
<div id="divEle" class="ele brd"></div>
<script>
document.getElementById('btn').addEventListener("click",function(){
document.getElementById('divEle').classList.remove("brd");
})
</script>
</body>
</html>- <!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.
- The<html> tag is used to indicate the beginning of HTML document.
- 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.
- 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.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In style block we sets div element width and height to ‘100px’ then filled with ‘aquamarine’ color by class ‘ele’. In class ‘brd’ we sets border for div square box.
- Here we defined button ‘Click Here’ with id ‘btn’ and div element with id ‘divEle’ and class ‘ele brd’ attributes.
- In script we referred button ‘Click Here’ by id ‘btn’ then which is appends with ‘addEventListener’ function for triggers click event to load function when user clicks on it.
- Within this we specifying div element by id ‘divEle’ then which is appends with classList.remove(‘brd’) for remove class ‘brd’ from div element so after that when we executes this we can’t see the border again.
- 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 div element in javascript.
When we executes program on browser we can see div section of aquamarine color square box with border and button ‘Click Here’ user needs to clicks on that button then border will removed from sqaure box because we successfully removed ‘brd’ class from div element.
I hope this tutorial on JavaScript remove class from div helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
