Remove specific inline CSS with pure JavaScript

Question

I want to remove following inline CSS:

<style type="text/css">.gm-style .gm-style-cc span, .gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style>
...

With following script i try to remove the CSS, which contains '.gm':

var inline_css = document.querySelectorAll('style[innerText*=".gm"]');
if (inline_css) {
    for (var i = 0; i < inline_css.length; i++) {
        inline_css[i].parentNode.removeChild(inline_css[i]);
    }
}

But it don't work.

You can't remove css from the stylesheet. It doesn't work like that. — user47589
– user47589, Commented Oct 9, 2017 at 17:56

Unamata Sanatarai · Accepted Answer · 2017-10-09 18:09:02Z

1

querySelectorAll returns a list of elements. From those elements you can match the inner text. And if it matches your style (at all), you may remove it. Like so:

var ar = document.querySelectorAll('style');
console.log("found styles: " + ar.length)
for(i = 0; i < ar.length; i++){
    if(ar[i].innerText.match('.gm')){
        ar[i].remove()
    }
}

// to check it worked
var ar = document.querySelectorAll('style');
console.log("remaining syltes: " + ar.length)

<style type="text/css">.gm-style .gm-style-cc span, .gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style>
<style type="text/css">.other .style{}
</style>

In case you have a few tags, you can pinpoint the exact one you need.

edited Oct 9, 2017 at 18:09

answered Oct 9, 2017 at 18:04

Unamata Sanatarai

6,6293 gold badges32 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2017-10-09 18:58:33Z

1

Give your <style> tag an ID, and then you'll be able to select that <style> tag with Javascript and use the remove() method to make it magically disappear. The associated styling will also be removed.

HTML:

<style type="text/css" id="style>.gm-style .gm-style-cc span, .gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style>

JS:

var style= document.getElementById("style");
style.remove();

edited Oct 9, 2017 at 18:58

answered Oct 9, 2017 at 18:01

Alex

8022 gold badges8 silver badges20 bronze badges

1 Comment

Prolativ Over a year ago

Which i not mentioned. The there are multiple inline styles with ".gm" classes, which are generated by Google, so i can't add an id attribute to it.

score 0 · Accepted Answer · 2019-08-05 16:36:50Z

(() => { 
          'use-strict';
      let needle = '.gm-style';
          if ( needle === '' || needle === '{{1}}' ) {
              needle = '.?';
          } else if ( needle.slice(0,1) === '/' && needle.slice(-1) === '/' ) {
              needle = needle.slice(1,-1);
          } else {
              needle = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
          }
          needle = new RegExp(needle);
          let cssnode = () => {
                                let css = document.querySelectorAll('style');
                                for (let cs of css) {
                                        if (cs.outerHTML.match(needle)) {
                                                         cs.remove();
                                        }       
                                }
          };
          if (document.readyState === 'interactive' || document.readyState === 'complete') {
                   cssnode();
          } else {
                   addEventListener('DOMContentLoaded', cssnode);
          }
})();

Has regex support too, if you need to remove multiple <style> tags.

Collectives™ on Stack Overflow

Remove specific inline CSS with pure JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related