How to remove a <style> element with jquery?

so there is this website and i wanna change the latest change in style, because i think it's ugly and useless. i located the bad part, but strangely enough i can't seem to 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();

that being the css path. i copied it with firebug. also tried it with the copied Xpath but :(

i al开发者_Go百科so tried:

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

that works, but it overwrites the old css rule too. and i would rather have that preserved.

i tried looking for an answer but i couldn't find any that helped. so now im hoping someone could help me with this.

thanks!

have you tried:

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

If you keep the style block, then it should remained preserved. Use this to change the color:

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

and this to change it back

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

it should go back to the rule for an anchor tag rather than an inline style.

You need

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

see demo here

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

More information:

1. https://developer.mozilla.org/en/document.styleSheets
2. 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.