Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to remove global CSS file from a particular page using jQuery?
Programmers require to use CSS while developing the web page to style the web page and make it attractive. We can add CSS to the web page in three ways: inline CSS, Internal CSS, and external CSS. To apply external CSS, we can import the CSS file in the <head> tag using the <link> tag. The external CSS file can also be a global CSS file.
Sometimes, we require to remove the global CSS file from a particular web page. For example, you allow your web app users to switch between multiple themes, and when users switch the theme, you need to remove the older CSS file and add a new CSS file according to the theme.
Here, we will learn different ways to remove the global CSS file from a particular page using JQuery.
Using the remove() method of JQuery
In the first approach, we use the find() and remove() methods to remove the global CSS file from the particular web page. We can add the global CSS file to the web page using the <link> tag and give a unique id.
In JQuery, we can find an element using id and execute the remove() method to remove the <link> tag from the <head> Section.
Syntax
Users can follow the syntax below to remove the global CSS file from the particular web page using the find() and remove() methods.
$('head').find('link#unique_id').remove();
In the above syntax, ‘unique_id’ is equal to the id of the '<link>' tag containing the global CSS file’s URL.
Example
In this example, we added the HTML content in the test.html file. Also, we added the CSS related to the HTML content into the ‘style1.css’ file.
In JQuery, we access the ‘head’ section of the web page and try to find the ‘link’ tag containing the ‘global’ id. After that, we execute the remove() method to remove the CSS file.
In the output, users can click the button and observe that all CSS from the web page will be gone as we remove the global CSS file.
Filename – test.html
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
<link rel = "stylesheet" href = "C:\Data E\style1.css" id = "global">
</head>
<body>
<h2> Removing the <i> Global CSS files </i> using the jQuery </h2>
<p> This is the paragraph. </p>
<div class = "first">
This is a text inside the div element.
</div>
<br>
<button id = "btn"> Remove the Global CSS files </button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$('head').find('link#global').remove();
});
});
</script>
</html>
Filename – style1.css
.first {
background-color: red;
font-size: 20px;
font-weight: bold;
width: 200px;
height: 200px;
}
p {
color: blue;
font-size: 20px;
}
Adding the ‘disabled’ attribute to the link using the attr() method
Another approach to removing the global CSS file from a particular web page is using the attr() method. The attr() method allows us to set any attribute to the HTML element. We can set the ‘disabled’ attribute to the ‘<link>’ tag containing the global CSS file.
Syntax
Users can follow the syntax below to add the ‘disabled’ attribute to the link tag to remove the global CSS file from the particular web page.
$('link[href*="filename"]').attr("disabled", "true");
In the above syntax, ‘filename’ should be replaced with the actual file name to select the ‘link’ tag containing the global CSS’s file name.
Example
In the example below, we added HTML content to the web page and CSS to the external CSS file. In JQuery, we added the ‘click’ event on the button. So, whenever users will click the button, they will access the <link> tag containing the ‘style1.css’ string and add the ‘disabled’ attribute to that.
Users can click the button in the output and can observe that CSS will be removed as global CSS file is removed.
Filename – test.html
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
<link rel = "stylesheet" href = "C:\Data E\style1.css" id = "global">
</head>
<body>
<h2> Removing the <i> Global CSS files </i> using the JQuery's attr() method and disabled attribute of HTML.
</h2>
<p> Click on the button to remove the Global CSS files. </p>
<br>
<button id = "btn"> Remove the Global CSS files </button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$('link[href*="style1.css"]').attr("disabled", "true");
});
});
</script>
</html>
Filename – style1.css
p {
color: green;
font-size: 1.3rem;
font-weight: bold;
border: 3px solid green;
}
Users learned to remove the global CSS file from a particular web page using two different approaches. In the first approach, we used the remove() method to remove the link tag, and in the second approach, we used the attr() method to add the ‘disabled’ attribute to the link tag.
1K+ Views
