如何使用jquery刪除子元素

Question

我有列表。

<ul id="main"> 
    <li><a href="#">Blah ...</a></li> 
    <li><a href="#">Blah ...</a></li> 
    <li><a href="#">Blah ...</a></li> 
    <li id="more">More 
     <ul> 
     <li><a href="#">Blah ...</a></li> 
     <li><a href="#">........</a></li> 
     <li><a href="#">........</a></li>  
     </ul> 
    </li> 
</ul> 

主要列表顯示給用戶。當用戶懸停超過列表項目更多。他看到更多列表的下拉菜單。當用戶點擊列表項中的更多列表。它應該代替第3個孩子在主要列表和第3個項目將被添加到#more列表。

我很感激任何幫助。

Answer 1

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); 
}); 

工作實施例：http://jsfiddle.net/FishBasketGordo/BAJXB/

編輯：我上述改變click到live和除去一些不必要的代碼。

Answer 2

這應做到：

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

對於徘徊，看看http://api.jquery.com/hover/

Answer 3

$('#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'); 
}); 

Answer 4

這裏是工作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); 
}); 

}）