How to dynamically remove all unwanted CSS and JS from page


Tags: javascript,jquery,css

Problem :

I have an amateur sports website to maintain and I am not an expert in web development. The pages I can put on the website can only be in the form of predefined templates, something similar to wordpress.

The main website loads it's own CSS files and JS files which we do not want as it interferes with our customisations. These files change as and when the main administrators/developers deploy new ones to the main/parent website.

I want to dynamically block loading of all CSS files and JS files that are not ours and instead use our own custom CSS and JS files.

Currently I am doing something like this below, but as you can see I will have to update the file names whenever they change to something else and I would not know when they change unless I notice the difference on the webpages.

<script type="text/javascript">
  $('link[rel=stylesheet][href="/assets/application-b51e2731e0d53e4d422.css"]').remove();
  $('link[rel=stylesheet][href="/assets/print-a622ffc90d1232b126e42c.css"]').remove();
  jQuery('head script[src*="application-7fd426f9bca208.js"]').remove();
</script>

Is there a better way to block all unwanted css / js files dynamically without me having to hardcode it like I have done above?



Solution :

Instead of worrying about tracking file names, why not just target anything that's not yours?

$('link').not('.myLink').remove();

And just make sure you drop that class on your link:

<link rel="stylesheet" href="path.css" class="myLink" />

    CSS Howto..

    How to reverse the text with js/css? [duplicate]

    How to use a CSS animation within a JavaScript plugin?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    How can I create facebook style vertical border line (layout)? :)

    How do I resize an element rotated in CSS to fit the new area in IE9?

    CSS how to vertically center image and text without changing style of image

    How work with degree or start and stop in linear-gradient CSS3

    How to make dropdown hide when clicked anywhere outside of it?

    In firefox, how can I change an existing CSS rule

    How to reverse this CSS spin animation

    How to select two elements with “> span” in CSS?

    How to make 1 table scrollable with fixed header without affecting other tables in Bootstrap

    How to make box light up in navigation bar - CSS

    How to put a image below another?

    How to make a square button

    how to style in css: product…(price)?

    How to modify this JQuery CSS into my view?

    How do I get my body to the bottom of my page OR further if necessary?

    How to specify a html tag on a LESS CSS nested class?

    How to make AngularJS Materials drop down menues more visable?

    How to align banner right in Internet Explorer 8

    how to use querySelector to select dynamic added elements

    how to let CMS make use of my css files instead of its own css?

    How to change text transparency in html/css?

    How hard is it to make an expanding tab in CSS?

    How to make rotating shape look thick?

    How to select all elements that are not of a class within an id css

    css: how to override max-width value with a larger (less restrictive) value

    How to specify multiple hover event targets in CSS?

    How to align logo and text in bootstrap on small screens?