How to remove css from DOM

Question

I have an app which allows the user to change the theme at runtime.

Before the new CSS is loaded, this code removes the old CSS:

jQuery('head > link').each(function () {
            if (this.href.includes('styles/kendo.')) {
                DOM.removeNode(this);
            }
        });

This looks OK to me, but when it runs, something gets broken (not sure what) and later CSS does not load properly.

If I comment out this code, then the CSS loads just fine. Makes no sense to me.

Maybe there is a completely different way to remove CSS from the DOM that would be better?

Most likely you have some errors being throw, either `.href` or `.includes` being undefined. Check your console. `DOM` is also possibly undefined. — Alexander O'Mara, Sep 10 '16 at 05:20
Are you sure? What is DOM then? Are you sure .includes is available, and all your link tags have href attributes? — Alexander O'Mara, Sep 10 '16 at 05:22
Using `$(this).remove()` would be the better approach as you are already using jQuery. — Deepak Kamat, Sep 10 '16 at 05:23
Have you tried `.attr()`? Try this: `if (jQuery(this).attr("href").includes("styles/kendo.")`. Are you sure you want a period in your `href`? — Neil A., Sep 10 '16 at 05:23
@DeepakKamat If you want to post your comment as answer, I will accept. — Greg Gum, Sep 10 '16 at 06:14

score 1 · Answer 1 · edited May 23 '17 at 12:32

Have you tried document.styleSheets[i].disabled = true;?

This works in plain JS (no jQuery):

for (var i = 0; i < document.styleSheets.length; i++) {
  if (document.styleSheets[i].href.includes('styles/kendo.')) {
    document.styleSheets[i].disabled = true;
  }  
}

Another way in plain JS would be to use forEach:

[].forEach.call(document.styleSheets, function(element, index, array) {
  if (array[index].href.includes('localhost')) {
    document.styleSheets[index].disabled = true;
  }
});

(why .forEach starts with [] and uses.call is explained here)

This would be the jQuery version:

jQuery(document.styleSheets).each(function(i) {
  if (document.styleSheets[i].href.includes('styles/kendo.')) {
    document.styleSheets[i].disabled = true;
  }  
});

Here's some references on document.styleSheet, etc.:

Thanks very much for detailed answer. – Greg Gum Sep 10 '16 at 17:06 — Greg Gum, Sep 10 '16 at 17:06

score 1 · Accepted Answer · answered Sep 10 '16 at 15:36

Everything looks fine in the code till

jQuery('head > link').each(function () {
            if (this.href.includes('styles/kendo.')) {

The next line DOM.removeNode(this); which is supposed to remove the HTML element i.e this uses DOM.removeNode method, it is not an inbuilt object hence we do not know how does it work, probably a library in your app might have that object so you may want to check its documentation.

Better than this if our task is to remove that particular HTML link element from the DOM we can use jQuery $.remove() method,

jQuery('head > link').each(function () {
            if (this.href.includes('styles/kendo.')) {
                $( this ).remove();

How to remove css from DOM

2 Answers2