Need Help With Removing A Style Sheet Via JQuery - CSS-Tricks

This topic is empty.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
December 11, 2013 at 3:19 pm #158207
Tom Houy
Participant
I have a third party javascript on a site I am working on that seems inject two additional style sheets into the page it is on. The problem is these style sheets are interfering with my main style sheets (they have the Eric Meyer CSS reset in them, which is screwing things up).

I am not able to directly modify or change the external javascript files, but I would like to just remove the code for the two style sheets, after the 3rd party javascript inserts them.

I’ve read elsewhere to use something like:
```
<script type="text/javascript">
$(document).ready(function() {
    $('link[href="mystyle.css"]').prop("disabled", true);          
});
</script>
```
This works when I make a test page that has a sample style sheet attached to it. However, it doesn’t seem to work on the page with the actual 3rd party javascript for some reason. I can’t post a live example of the site right now, but the HTML on the rendered page is like this:
```
<html>
<head>
</head>
<body>
    <div id="demo">
        <link href="https://www.demo.com/stylesheet1.css" rel="stylesheet" type="text/css"> 
        <link href="https://www.demo.com/stylesheet2.css" rel="stylesheet" type="text/css">
        Additional HTML the javascript inserts below...
    </div>
</body>
</html>
```
It continues to inject those two style sheets on the rendered page. There is not a unique ID for either of them, but they are contained within a DIV that does have a unique ID if that helps.

Is there anything I can do with JQuery (or javascript, but I just figured jQuery would be easier, especially since it’s already being loaded for other stuff on the page) to remove or disable these two extra style sheets? Perhaps the code I am attempting to use isn’t running after the 3rd party javascript runs, or something like that?

Any help would be greatly appreciated.
December 11, 2013 at 6:19 pm #158210
Tom Houy
Participant
Ok, there seems to be a timing issue. When I put a delay on the script, it works fine and removes the CSS as I wanted. What I’m looking to do at this point is to just somehow fire this script exactly when the other one finishes running.
```
<script type="text/javascript">
setTimeout(function() {
    $('link[href="https://www.demo.com/stylesheet.css"]').prop("disabled", true);          
}, 2000);
</script>
```
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

The forum ‘JavaScript’ is closed to new topics and replies.