How to remove child elements using jquery

I have list.

<ul id="main">
   <li><a href="#">Blah ...</a></li>
   <li><a href="#">Blah ...</a></li>
   <li><a href="#">Blah ...</a></li开发者_如何学Go>
   <li id="more">More
       <ul>
         <li><a href="#">Blah ...</a></li>
         <li><a href="#">........</a></li>
         <li><a href="#">........</a></li>    
       </ul> 
   </li>  
</ul>

The main list is displayed to user. When user hovers over list item more. He sees the dropdown with more list. When the user clicks on the list item in the more list. It should replace 3rd child in the main list and 3rd item will be added to #more list.

I appreciate any help.

This should do it:

$('#more li').click(function() {
    $('#main li').eq(2).replaceWith(this).appendTo('#more');
});

For the hovering, have a look at http://api.jquery.com/hover/

CSS

#more ul { display: none; }

Javascript

$('#more').hover(function() { $('ul', this).show(); },
                 function() { $('ul', this).hide(); });

$('#more li a').live('click', function() {    
    $(this).before($('#main > li:last-child').prev());
    $('#main > li:last-child').before(this);
});

Working example: http://jsfiddle.net/FishBasketGordo/BAJXB/

EDIT: I changed click to live above and removed some unnecessary code.

$('#more').hover(function(){$('#more ul').show();}, function(){$('#more ul').hide();});

$('#more li').click(function(){
    var thirdChild = $('#main li:eq(2)');
    thirdChild.replaceWith(this).appendTo('#more');
});

Here is the working demo

$(function(){

$('#more').hover(function(){
    $('#more ul').show();
}, function(){
    $('#more ul').hide();
});

$('#more li').click(function() {
    $('#more ul').append($('#main > li').eq(2))
    $('#more').before(this);
});

})