How to remove CSS style of <style> tag using JavaScript/jQuery ? Last Updated : 11 Oct, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. html <!DOCTYPE HTML> <html> <head> <title> How to remove CSS style of style tag using JavaScript/jQuery ? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </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. html <!DOCTYPE HTML> <html> <head> <title> How to remove CSS style of style tag using JavaScript/jQuery ? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </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: Comment More infoAdvertise with us Next Article How to Remove and add Style with .css() Function using JavaScript? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to Remove all Inline Styles using JavaScript/jQuery? To remove all inline styles from an element using JavaScript or jQuery, the removeAttribute method in JavaScript or the removeAttr method in jQuery can be used. Approach: The jQuery attr() and removeAttr() methods are used to remove the inline style property. The attr() method sets the attribute val 2 min read How to remove CSS property using JavaScript? To remove CSS property using JavaScript, we have different methods. In this article, we will learn how to remove CSS property using JavaScript. Below are the Methods used to remove CSS property using JavaScript: Table of Content Using CSS removePropertyUsing the setProperty methodMethod 1: Using CSS 2 min read How to Select and Manipulate CSS pseudo-elements using JavaScript / jQuery ? In this article, we will learn how to select and manipulate CSS pseudo-elements using JavaScript (or jQuery). CSS pseudo-elements allow developers to style and enhance specific parts of an HTML document with the help of selectors like::before and::after, which provide the flexibility to add decorati 2 min read How to add CSS Rules to the Stylesheet using JavaScript ? In this example, we will see how to add CSS rules to the stylesheet element using JavaScript. First, we will create an HTML document and then add some CSS rules using JavaScript. Syntax: let styleText = document.getElementById('GFG').sheet; let st = `.box { width: 100px; height: 100px; }`; styleText 2 min read How to Remove and add Style with .css() Function using JavaScript? There are many cases, especially as the content gets more interactive, where the developer wants styles to dynamically kick in based on user input, some code having run in the background, and more. In these sorts of scenarios, the CSS model involving style rules or inline styles doesn't help. The so 3 min read How to load CSS files using JavaScript? The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files to the HTML document. JavaScript can also be used to load a CSS file in the HTML document. Approach:Use the document.getElementsByTagName() method to get HTML head element.Create a new link 2 min read Like