CODEWITHSUNDEEP
javascript
Prolativ
Prolativ

Reputation: 797

Remove specific inline CSS with pure JavaScript

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.

Upvotes: 1

Views: 978

Answers (3)

user11590849
user11590849

Reputation: 

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

Upvotes: 0

Alex
Alex

Reputation: 802

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

Upvotes: 1

Unamata Sanatarai
Unamata Sanatarai

Reputation: 6637

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.

Upvotes: 1

Related Questions