query about :first-child

query about :first-child

HI,
    I am new to Jquery. Im trying to remove first child inside div. Below example i am trying
      
       <!DOCTYPE html>
<html><head>
<style> span { color:#008; } span.sogreen { color:green; font-weight: bolder; }
</style>


<script src=" http://code.jquery.com/jquery-latest.min.js"></script > </head><body>
  <div id= id1>
        <span>John,</span>
        <span>Karl,</span>
        <span>Brandon</span>
  </div>
  <div> <span>Glen,</span>
        <span>Tane,</span>
        <span>Ralph</span>
  </div>
<script>
$("div span:first-child") .css("text-decoration", "underline") .hover(function ()
{
   $(this).addClass("sogreen");
},
function ()
{
$('#id1').remove(':first-child');
});
</script>
</body></html>
 
But complete DIV for id = "id1" is removed. I want only first span should be deleted.
Please tell me what is the solution?