In HubSpot a file called layout.min.css is automatically added and is you cannot disable this css file anywhere in the CMS.
As such, I've tried to remove() and disable the file via JS, but the styles from that css file are still being rendered.
When I view source, this file looks like this:
<link rel="stylesheet" href="//cdn2.hubspot.net/hub/xxxxxx/hub_generated/template_assets/1642616240355/hubspot/hubspot_default/shared/responsive/layout.min.css">
Now, notice the 1642616240355 in the URL? That number (for some reason) changes everyday.
Yesterday, I had the following running, and it removed the file:
$("link[href='//cdn2.hubspot.net/hub/xxxxxx/hub_generated/template_assets/1642528871696/hubspot/hubspot_default/shared/responsive/layout.min.css']").attr('disabled', 'disabled');
$("link[href='//cdn2.hubspot.net/hub/xxxxxx/hub_generated/template_assets/1642528871696/hubspot/hubspot_default/shared/responsive/layout.min.css']").remove();However, as it keeps changing, I'm now looking to remove and disable any css file that contains layout.min.css in its href.
I'm aware that there's a :contains selector, which might be of use here, but unsure on how that would be implemented? As in, how would I tell the code to look at all stylesheets and remove the one that contains "layout.min.css" in its href?
Have also tried:
<script>
const stylesheets = document.querySelectorAll('link[rel=stylesheet]');
for (var i = 0; i < stylesheets.length; i++) {
if(stylesheets[i].href.indexOf("responsive/layout.min.css") >= 0) {
stylesheets[i].disabled = true;
stylesheets[i].remove();
}
}
</script>But it still shows the layout.min.css when viewing source.
I would recommend you to do this with pure JavaScript instead of JQuery. Because otherwise you have to wait until the JQuery library is loaded.
Use this code for that:
const cssElement = document.querySelector("link[href*='layout.min.css']");
cssElement.disabled = true;
cssElement.remove();
Based on the code you provided that you said works, why not use the ends-with matcher: $=?
$("link[href$='layout.min.css']").remove();
That'll find all the <link> HREFs that end with 'layout.min.css' and remove them, which is exactly what you're describing as your goal.