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!
