Skip to content
Related Articles

Related Articles

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 oftwo. 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=
    </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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :