15

I don't want to use styles from style.css, so I decided to remove style.css from DOM. This work just fine in Firefox and IE8, but not in IE6:

$("LINK[href='http://www.example.com/style.css']").remove();

Any other solution, with jQuery?

Here is example:
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("link[href*='style.css']").remove();         
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">...</div>
</body>
</html>

And here is CSS (style.css):

#content {
    background-color:#333;
}

Only in IE #content is still dark. :(
Maybe is jQuery bug?

Aron Rotteveel
  • 81,193
  • 17
  • 104
  • 128
sasa
  • 2,443
  • 5
  • 23
  • 35

4 Answers4

21

This is not a bug in jQuery, it is a bug (or possibly, a feature) of the IE rendering engine.

It seems this problem is being caused by the fact that Internet Explorer does not correctly re-render the page after removing the LINK element from the DOM.

In this particular case, the LINK tag is no longer present at the DOM, but IE still displays the CSS that has been loaded into memory.

A workaround / solution for this is to disable the stylesheet using the .disabled property like this:

// following code will disable the first stylesheet
// the actual DOM-reference to the element will not be removed; 
// this is particularly useful since this allows you to enable it
// again at a later stage if you'd want to.
document.styleSheets[0].disabled = true;

EDIT in reply to your comment:

Or, if you want to remove it by the href use the following code:

var styleSheets = document.styleSheets;
var href = 'http://yoursite.com/foo/bar/baz.css';
for (var i = 0; i < styleSheets.length; i++) {
    if (styleSheets[i].href == href) {
        styleSheets[i].disabled = true;
        break;
    }
}
Aron Rotteveel
  • 81,193
  • 17
  • 104
  • 128
  • Thanks for the answer, but that is not what I want. I don't know the element index, because it is changeable. The only thing I know about this element is href value. – sasa Jun 09 '09 at 12:56
  • 1
    I just added an extra example that should solve this issue if you only have the href – Aron Rotteveel Jun 09 '09 at 14:18
  • 1
    It doesn't work in FF, but I added $("link[href*='style.css']").remove(); after for statement and now everything is ok. Thanks :) – sasa Jun 10 '09 at 08:15
  • Thanks for following up with that sasa, worked like a charm in Chrome. Still have yet to cross-browser test! – Chuck Bergeron Apr 20 '12 at 10:44
11

Perhaps it's something strange IE6 does to URL in the href attribute? Try something like:

$("LINK[href*='style.css']").remove();

(i.e. check whether the href value contains "style.css")

It's just a guess, however. If that doesn't work, I recommend checking the JQuery documentation closely on the subject of attribute selectors and the remove method.

Also keep in mind that it's also not impossible that it's in fact a bug. (IE6 in general causes lots of issues involving JavaScript and DOM manipulation, among other things.)

Noldorin
  • 144,213
  • 56
  • 264
  • 302
  • It seems that definitely doesn't work. I've update my post. Maybe bug in jQuery or something... – sasa Jun 08 '09 at 12:52
5

Topic's quite old, but You can only add ID to your link element, and delete it by element:

$("#id").remove();
Sebastian Koziara
  • 133
  • 3
  • 9
  • Fast forward 3 years and this has been THE answer to resolve exactly the same problem for me. Thank you so much! – JasonMHirst Apr 01 '16 at 07:28
0

Maybe using lowercase on the tag name?

Jeff Ober
  • 4,967
  • 20
  • 15