title: How to dynamically remove all unwanted CSS and JS from page
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $('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();
  &lt;/script&gt;
  </code></pre>
  
  <p>Is there a better way to block all unwanted css / js files dynamically without me having to hardcode it like I have done above?</p>