如何使用jQuery從列表中刪除項目？

Question

我的輸出內容如下

<ul>
    <li>
        Songs
        <ul>
             <li>
                 Genre
                 <ul>
                     <li>
                         Country
                     </li>
                 </ul>
             </li>
        </ul>
    </li>
</ul>
<ul>
    <li>
        Songs
        <ul>
             <li>
                 Genre
                 <ul>
                     <li>
                         Pop
                     </li>
                 </ul>
             </li>
        </ul>
    </li>
</ul>

請忽略為什么這樣顯示內容。 我的問題是，如何使用jQuery刪除重復的父母<li>和<ul>所以它看起來像這樣

<ul>
    <li>
        Songs
        <ul>
             <li>
                 Genre
                 <ul>
                     <li>
                         Country
                     </li>
                     <li>
                         Pop
                     </li>
                 </ul>
             </li>
        </ul>
    </li>
</ul>

我已經嘗試過unwrap（）方法，但是不知道將<li>放在哪里的邏輯。

Answer 1

嘗試，

var uls = $('ul');
uls.first().find('ul:last').append(uls.last().find('li:last'));
uls.first().siblings('ul').remove();

演示

Answer 2

我會得到我需要的東西並重新編寫它，假設整個東西周圍都有某種容器，只需重寫中間部分即可。 代碼可能更簡潔，但效果很好。

<div>
<ul>
    <li>
        Songs
        <ul>
             <li>
                 Genre
                 <ul>
                     <li>
                         Country
                     </li>
                 </ul>
             </li>
        </ul>
    </li>
</ul>
<ul>
    <li>
        Songs
        <ul>
             <li>
                 Genre
                 <ul>
                     <li>
                         Pop
                     </li>
                 </ul>
             </li>
        </ul>
    </li>
</ul>
</div>

<script>
var li='';
$.each($("li:contains('Genre') ul li"), function(i, e){
  item=$(e).children('ul').text().replace(/\n/g,'').trim()||'';
    if (item.length!=0){
        li+='<li>'+item+'</li>';
    };
});

if (li.length!=0){
    var html='<ul><li>Songs<ul><li>Genre<ul>'+li+'</ul></li></ul></li></ul>';
    $('div').html(html);
};
</script>

演示： http ： //jsfiddle.net/886P3/