Delete Node of HTML by JS

Question

Trying to delete specific Node of HTML.

First HTML:

There many List in .widget-content want to delete all .list without First Li. Means keep first-child.

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

Second HTML:

Want to delete ul of .widget-content ul if .wrapper has class delete. Condition need.

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

How to do this by JS/jquery? Fiddle example would be helpful.

Answer 1

$(document).ready(function () {

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

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

Answer 2

slice can be used to select elements with a start and end.

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