Remove Style Attribute jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Pragati
In this article we will show you the solution of remove style attribute jQuery, here we needs to use removeAttr() and click() methods. The click() method used for loads some process when user clicks on button element defined html code and removeAttr() method used for removes one or more attributes from the selected elements.
So here we can remove style attribute from p paragraph element.
Step By Step Guide On Remove Style Attribute jQuery :-
Here we defined html block with para element with style attribute which have two line of properties, some text and button ‘Remove Style’ for generate some process when user clicks on it.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that we waiting for click event occurrence which is appended with button tag name then there we specified style attribute on removeAttr() method which is appends with para element.
<!DOCTYPE html>
<html>
<head>
<title>REMOVE STYLE ATTRIBUTE</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('p').removeAttr('style');
})
})
</script>
</head>
<body>
<p style="color: blue;font-size: larger;">This is a paragraph tag</p>
<button>Remove Style</button>
</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.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- 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 script we defined ready() method within that we appending click() method with button by using tag name ‘button’ for generate click event when user clicks on ‘Remove Style’ button.
- Within function we needs to specify which style attribute needs to remove on removeAttr() method, here we given ‘style’ attribute of para element which is needs to append with element p.
- At inline style we defined properties ‘color set to ‘blue’, font size set to ‘larger’’ which are styles we can’t see after clicks on button ‘Remove Style’ because we removed style attribute from p element.
- In html block we defined p element with some inline styles, some text ‘This is a paragraph tag’ and button ‘Remove Style’.
- 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 style attribute from specific html element using jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see ‘This is a paragraph tag’ with some style and button ‘Remove Style’ now user needs to click on button then we can see applied styles gone from p element because we removed style attribute.
I hope this article on remove style attribute jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
