Removing a Stylesheet from the DOM with jQuery

I was coding a DotNetNuke skin today (pardon me while I throw up), and got sick and tired of the interference of it’s default stylesheet.  Many of you right now are probably thinking the quick fix would be to remove the content from the stylesheet on the server, but the problem is that I am dealing with DotNetNuke Professional, where you can host multiple domains.  Every skin on every domain that’s hosted on the DNN CMS references this stylesheet and you simply can’t do that without screwing up pre-existing sites.  Unfortunately, there is no option to remove the inclusion in the site settings, or anywhere within DotNetNuke.

Today, enough was enough.  I looked at the source code from the browser and thought that since the stylesheet had a unique ID, I could just remove it with the jQuery “.remove()” function.  You can add this small script anywhere on your page, it just has to be placed after the corresponding stylesheet you want to remove.

Here’s the link tag I want to remove:

<link id="APortals__default_" rel="stylesheet" type="text/css" href="/Portals/_default/default.css" />

…and here’s how I removed it with jQuery:

<script type="text/javascript">
  $("#APortals__default_").remove();
</script>