如何使用jquery从列表中删除项目

How to remove item from list with jquery?

本文关键字：删除项目列表何使用 jquery 更新时间：2023-09-26

我的输出内容如下

<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>放在他们应该在哪里的逻辑。

试试，

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

演示

我会得到我需要的东西并重写它，假设整个东西周围有某种容器只是重写中间部分。代码可以更干净，但它工作得很好。

<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/