通过JS删除HTML节点

Question

尝试删除HTML的特定节点。

第一个HTML：

.widget-content中有很多列表要删除没有第一个.list的所有Li。意味着保持第一个孩子。

<div class="wrapper delete">

    <div class="widget-content">
        <ul>
            <li class="lists"> 
                Content
            </li>
            <li class="lists"> <!-- Delete this-->
                Content
            </li>
            <li class="lists"> <!-- Delete this-->
                Content
            </li>
        </ul>
    </div>

</div>

第二个HTML：

如果ul有课程.widget-content ul，则要删除.wrapper delete。条件需要。

<div class="wrapper delete">

    <div class="widget-content"> 
        <ul>      <!-- Delete This -->
            <li class="lists">
                Content
            </li>
            <li class="lists">
                Content
            </li>
            <li class="lists">
                Content
            </li>
        </ul>

    </div>

</div>

JS / jquery如何做到这一点？小提琴示例会有所帮助。

Answer 1

$(document).ready(function () {

    $('.widget-content li').not(':first-child').remove();

    if ($(".wrapper").hasClass('delete')) {
        $('.widget-content ul').remove();
    }
});

Answer 2

slice 可用于选择包含开头和结尾的元素。

$('.widget-content li.lists').slice(1).remove();
$('.wrapper.delete ul').remove();