jquery delete items from the list after one click

advertisements

can you help me with an ideea how i could remove items from a list after i click an item? let's say i have a list with 5 items and i press on the 3rd item, i want item4 and item5 to be removed. I want to remove all items after the one clicked in the list.Here is an html

<div class="row bcrumb">
            <div class="col-sm-12">
                <ol class="breadcrumb">
<li class="item"><a href="#">Item1</a></li>
<li class="item"><a href="#">Item2</a></li>
<li class="item"><a href="#">Item3</a></li>
<li class="item"><a href="#">Item4</a></li>
<li class="item"><a href="#">Item5</a></li>
                </ol>
            </div>
        </div>


Remove all list items after the clicked item:

$('.item').on('click', function(e) {
  e.preventDefault();
  $(this).nextAll().remove();
});

Codepen