jquery - remove not working correctly. src doesnt work with google chrome . what should i do to remove the braces

<script type="text/javascript">
$(document).ready(function() {  
    // all jQuery code goes here  
    $("li").hover(function(){
        $(this).prepend("<span>(</span>");
    },function(){
        $(this).append("<span>)</span>");
    });
    /*
    function (){
        $("li").remove();
    } 
    */

    $("li.fade").hover(function(){
        $(this).fadeOut(100);
        $(this).fadeIn(300);
    });
 });
 </script>

HTML

<div class="class1"> 
<ul id="1"> 
    <li class="fade" ><a href="server43.hostpoint.ch/~raffael1/web2.roboearth/">What is RoboEarth?</a></li> 
    <li class="fade"><a href="server43.hostpoint.ch/~raffael1/web开发者_StackOverflow社区2.roboearth/motivation/…; <li class="fade"><a href="server43.hostpoint.ch/~raffael1/web2.roboearth/project-scope/… Scope</a></li>              
</ul> 
</div>

i'm guessing that you want the brackets appear on mouse over, and removed on mouse out.

jquery hover first callback is for the mouse over state, the second for mouse out, thus:

$("li").hover(
    function() {
        // mouse over
        $(this).prepend("<span>(</span>");
        $(this).append("<span>)</span>");
        },
    function() {
        // mouse out
        $(this).find('span').remove();
        }
    );