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

Last Updated : 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> 