How to remove global CSS file from a particular page using jQuery ?

01 Feb, 2021
This article describes the approach to remove a global CSS file from a page. It can be used in scenarios where a template might have a global CSS file included and you need to remove the file so that any other CSS file takes effect. We will see this in the example below: 
Consider the index.html file with two CSS file imports, the global.css with the id of “one“ and a second page.css with the id of “two“. The global.css is the file that remains across all pages and page.css is the file for a particular page.
The code below is for the index.html file. Both the global.css and page.css files are included for demonstration.
HTML
<!DOCTYPE html><html>  <head>    <!--  CSS  -->    <link id="one" type="text/css"         rel="stylesheet" href="global.css" />      <link id="two" type="text/css"         rel="stylesheet" href="page.css" /></head>  <body>    <h1>GeeksForGeeks</h1>    <h2>Welcome to GeeksForGeeks</h2>      <div id="para-one">        <p>            A Computer Science portal for geeks.             It contains well written, well             thought and well explained computer             science and programming articles,             quizzes and questions. A Computer             Science portal for geeks. It contains             well written, well thought and well             explained computer science and             programming articles, quizzes and             questions.        </p>    </div>      <div id="para-two">        <p>            A Computer Science portal for geeks.             It contains well written, well             thought and well explained computer             science and programming articles,             quizzes and questions. A Computer             Science portal for geeks. It contains             well written, well thought and well             explained computer science and             programming articles, quizzes and             questions.        </p>    </div></body>  </html>
CSS Files: global.css file
p {
    color: red;
    text-align: center;
}

h3 {
    color: chocolate;
    text-align: center;
}

body {
    background-color: rgb(178, 248, 248);
}
The below code is the page.css file.
h1 {
    color: green;
    text-align: center;
}

h2 {
    text-align: center;
}

p {
    color: magenta;
}
Output: This is the Index.html with global.css and page.css files.
Approach: We will create a script that will find the global stylesheet with the id of “one” and will remove it from the head section. The find() and remove() methods of jQuery are used for this purpose. This is demonstrated in the example given below:
jQuery
<script>  $(document).ready(function() {          // Find the stylesheet with id of 'one'    // and remove it from the document    $('head').find('link#one').remove();  });</script>
Final Code:
HTML
<!DOCTYPE html><html>  <head>    <!--  CSS  -->    <link id="one" type="text/css"         rel="stylesheet" href="global.css" />      <link id="two" type="text/css"         rel="stylesheet" href="page.css" />      <!-- Jquery  -->    <script src=        "https://code.jquery.com/jquery-3.5.1.min.js">    </script>      <script>        $(document).ready(function() {            $('head').find('link#one').remove();        });    </script></head>  <body>    <h1>GeeksForGeeks</h1>    <h2>Welcome to GeeksForGeeks</h2>      <div id="para-one">        <p>            A Computer Science portal for geeks.             It contains well written, well             thought and well explained computer             science and programming articles,             quizzes and questions. A Computer             Science portal for geeks. It contains             well written, well thought and well             explained computer science and             programming articles, quizzes and             questions.        </p>    </div>      <div id="para-two">        <p>            A Computer Science portal for geeks.             It contains well written, well             thought and well explained computer             science and programming articles,             quizzes and questions. A Computer             Science portal for geeks. It contains             well written, well thought and well             explained computer science and             programming articles, quizzes and             questions.        </p>    </div></body>  </html>
Output: This is an index page after the global.css removal.
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.