使用纯JavaScript删除特定的内联CSS

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.

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

Answer 2

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.

Answer 3

(() => { 
          '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.