Greg Gum Greg Gum - 2 months ago 15
CSS Question

How to remove css from DOM

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?

Answer

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();
Comments