How to remove a <style> element with jquery?

Question

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 also 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!

Answer 1

have you tried:

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

Answer 2

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.