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> 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 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.
- 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.
- 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.
- 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.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
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.