Removing the CSS file

Question

I am using spring MVC with jsp page for presentation, i have three tab suppose A,B and C in one jsp page. While clicking on A tab the css file such as aa.css have being loading in head tag with respective div is shown and the same way on click on B and C. The main problem is once the Three .CSS file is being loaded it overwrite each other. Also i want to remove css file from head which has being loaded on click of any of above tab using jquery as shown below.

  $("#A").click(function(){
     alert("Remove bb and cc.css file form head tag");
  });

any idea will help me lot.

Thanks.

Answer 1

Give an id to the <link> tag.

<link rel="stylesheet" href="style1.css" id="style1" />
<link rel="stylesheet" href="style2.css" id="style2" />

And use this code:

$("#A").click(function(){
    $("#style1").attr("disabled", "disabled");
});

Note: While there is no disabled attribute in the HTML standard, there is a disabled attribute on the HTMLLinkElement DOM object.

The use of disabled as an HTML attribute is non-standard and only used by some Microsoft browsers. Do not use it. To achieve a similar effect, use one of the following techniques:

• If the disabled attribute has been added directly to the element on the page, do not include the <link> element instead;
• Set the disabled property of the DOM object via scripting.

Answer 2

You can unload a css by disabling it as follows:

$("#A").click(function(){
    $("link[href*=bb.css]").attr("disabled", "disabled");
    $("link[href*=cc.css]").attr("disabled", "disabled");
    $("link[href*=aa.css]").removeAttr("disabled");
});

Answer 3

I had to disable css files without being able to specify an id, so to remove the following css file:

<link rel="stylesheet" type="text/css" href="http://localhost:8092/venliglogin/module.php/kitmodule/bootstrap/css/bootstrap.min.css" disabled="disabled">

I added this script

<script type="text/javascript">
  $(document).ready(function() {
    $('link[href*="bootstrap.min.css"]').attr("disabled", "true");
  }
</script>

Answer 4

You just give that link tag an id or a class (say id="deleteMe") then remove it like below:

$('head').find('link#deleteMe').remove();  

So in your case add id to each file when you link them like this:

<link id="aa" rel="stylesheet" href="First.css" type="text/css" />  
<link id="bb" rel="stylesheet" href="Second.css" type="text/css" />  
<link id="bb" rel="stylesheet" href="Third.css" type="text/css" />

Now to remove only Second.css, Third.css you have to write your jQuery like this:

(function ($) {  
    $('head').find('link#aa').remove();  
    $('head').find('link#bb').remove();  
})(jQuery);