Given an HTML document containing inline and internal CSS and the task is to remove the style of <style> tag. The internal or embedded CSS is used within the head section of the HTML document. It is enclosed within <style> tag.
Approach: The jQuery remove() and empty() methods are used to remove the CSS style of <style> element.
Example 1: This example uses remove() method to remove the CSS style of <style> element.
<!DOCTYPE HTML> <html> <head> <title> How to remove CSS style of style tag using JavaScript/jQuery ? </title> <script src= </script> <style> .parent { background: green; } .child { background: blue; margin: 10px; } </style> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> </p> <div class="parent" id = "parent" style = "color: red; font-size: 22px"> Parent <div class="child"> Child </div> </div> <br> <button onclick = "GFG_Fun()"> click here </button> <p id = "GFG_DOWN" style = "font-size: 24px; font-weight: bold; color: green;"> </p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); var parent = document.getElementById('parent'); up.innerHTML = "Click on the button to remove " + "the CSS from the < style > tag only."; function GFG_Fun() { $('style').remove(); down.innerHTML = "Style tag has been removed."; } </script> </body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 2: This example uses jQuery empty() method to remove the CSS style of <style> element.
<!DOCTYPE HTML> <html> <head> <title> How to remove CSS style of style tag using JavaScript/jQuery ? </title> <script src= </script> <style> .parent { background: green; } .child { background: blue; margin: 10px; } </style> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;"> </p> <div class="parent" id = "parent" style = "color: red; font-size: 22px"> Parent <div class="child"> Child </div> </div> <br> <button onclick = "GFG_Fun()"> click here </button> <p id = "GFG_DOWN" style = "font-size: 24px; font-weight: bold; color: green;"> </p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); var parent = document.getElementById('parent'); up.innerHTML = "Click on the button to remove the" + " CSS from the < style > tag only."; function GFG_Fun() { $('style').empty(); down.innerHTML = "Style tag has been removed."; } </script> </body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
