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 can I set CSS only for specific IE browsers?

    How to do like this list using
  • and CSS?
  • How to change the Color of dynamically created divs on click event, who are having same class?

    How can I to specific the css rules for Chrome and IE in my HTML page or in SCSS file?

    How to make arc-in animation on a website - CSS or JavaScript?

    How to make image stretch to a specific paragraph?

    How to control the CSS on an Active/Focused button in Foundation 5 [RESOLVED]

    How to center without losing it's function

    How can I edit adjacent selector to a nested one

    How to make beatiful select lists?

    How to make a
  • link visited with css
  • How to make text appear when input box is active

    How to fill in blank space using html and css

    How to make a rectangle mask with css

    Show bootstrap glyphicon in link when hovering

    How to make layout with 3 elements where 1 is resizable

    Border-bottom showing on top

    CSS - How to change backgound colour for item avatar in ionicframework?

    How to display 20 columns in html design

    How to center vertical inside header?

    How to center div while keeping inside divs on same line in css?

    How to bound CSS3 animation to class

    How to create a border-bottom in CSS using a text character such as a dash, letter or number

    How to put a div in more pages

    How to convert this CSS animation to use GPU level, instead of updating layer tree

    How to build HTML email using CSS?

    How to move nagivation bar to more to the right to fit a logo left of the bar

    Confusion as to how clearfix actually works

    how to remove and add css class to a specific textbox inside gridview in c# asp.net?

    How can I hide with CSS only?