Question

168

Removing < link> element with jQuery?

rated 0 times [ 173] [ 5] / answers: 1 / hits: 44690 / 15 Years ago, mon, june 8, 2009, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dequant

Add To Favorites

Follow

Total Points: 88

Total Questions: 99

Total Answers: 95

Location: Ukraine

Member since Sun, Dec 13, 2020

4 Years ago

dequant questions

1 React App: EventSource's response has a MIME type (application/json) that is not text/event-stream. Aborting the connection

Sat, Aug 29, 20, 00:00, 4 Years ago

1 How to get Image Url from local Json file in React.js

Tue, Aug 4, 20, 00:00, 4 Years ago

1 Get next cron job timing in node-cron

Thu, Jun 25, 20, 00:00, 4 Years ago

1 How to get current latitude and longitude in vuejs

Sat, Jun 20, 20, 00:00, 4 Years ago

1 React lazy loading - when to use

Tue, Feb 25, 20, 00:00, 4 Years ago

View All

answered 15 Years ago bradley · Accepted Answer

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;

    }

}