How to remove global CSS file from a particular page using jQuery ?
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= </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.
Please Login to comment...