how to remove the style tags from the header section

Question

I am using angular js and deployed a site, In the head part of my website there are a lot of style tags are coming in the console like the below image, I attached a snap of my website console. I don't know where those tags are coming from and how can I remove those style tags from the head of the website

Answer 1

As of my understanding, you are using Angular Material Design and it is responsible for adding the style tags in your head section. It all happens under the hood, you can follow this link to know more. I think you no need to worry about removing this style tags and all because it came as functionality. Angular Material Design dynamically inject this style tags for theming purpose.

Reference: https://material.angularjs.org/latest/Theming/05_under_the_hood

Thank you.

EDIT

If you don't want to generate themes by default then you can use

$mdThemingProvider.generateThemesOnDemand(true);

Example:

    angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider, $provide) {
      //disable theme generation
      $mdThemingProvider.generateThemesOnDemand(true);
      $provide.value('themeProvider', $mdThemingProvider);

    })
    .run(['themeProvider', '$mdTheming', function(themeProvider, $mdTheming) {
      //create new theme
      themeProvider.theme('default')
      .primaryPalette('pink')
      .accentPalette('orange')
      .backgroundPalette('yellow');

      //reload the theme
      $mdTheming.generateTheme('default');

      //optional - set the default to this new theme
      themeProvider.setDefaultTheme('default');
    }]);

Reference: https://material.angularjs.org/latest/Theming/04_multiple_themes

Answer 2

If you want to remove all the style tags :

var st = document.getElementsByTagName('style');

and add a loop to remove all of them.

for(i = 0 ; i < st.length ; i++){

    st[i].parentNode.removeChild(st[i]);

}

Answer 3

Please Try with below JQuery code

$('style[md-theme-style]').remove();