How to remove a <style> element using jquery?

Question

so there is this site, and I want to change the last change in style, because I find it ugly and useless. I found the bad part, but, oddly enough, I can’t remove it.

 <div id="regularMenu"> <ul class='menu2'> <li> <a href="/linkA" class="notcurrent">link1</a> </li> <li> <a href="/linkB" class="notcurrent">link2</a> </li> <li> <a href="/linkC" class="notcurrent">link3</a> </li> <style> a, a:visited { color: #832; } #menu a, #menu a:visited { color: #832; } .menu2 li a, .menu2 li a:visited { color: #832; } </style> </ul> </div> 

I tried

  $('.menu2> *:last-child').remove(); 

and

  $('/html/body/div[3]/div/ul/style').remove(); 

being a css loop. I copied it using firebug. also tried it with copied Xpath, but :(

I also tried:

  $('a').css("color", "#269"); 

but it also overwrites the old css rule. and I would prefer it to be preserved.

I tried to find the answer, but I could not find anything that would help. so now I hope someone can help me with this.

thanks!

Answer 1

You tried:

 $('.menu2 style').remove(); 

Answer 2

If you save a style block, it must remain saved. Use this to change color:

 $('a').css("color", "#269"); 

and this is to change it back

 $('a').css("color", ""); 

it should return to the rule for the anchored tag, and not to the inline style.

Answer 3

You need

 $('.menu2 > style').remove(); 

see demo here

Answer 4

Use document.styleSheets to find all the stylesheets used and, when unwanted is found, set disabled to true.

Additional Information:

• https://developer.mozilla.org/en/document.styleSheets
• http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet

As far as I can tell, it works in all modern browsers.