Question

你可以帮我解决一下我点击项目后如何从列表中删除项目的问题吗？假设我有一个包含5个项目的列表，我按下第3个项目，我想要删除item4和item5。我想删除列表中单击后的所有项目。这是一个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>

Answer 1

删除点击项目后的所有列表项：

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

Codepen

Answer 2

您可以使用nth:child选择器从列表中删除任何项目，如下所示：

$('ul li:nth-child(4)').remove();
$('ul li:nth-child(5)').remove();

但问题是，您是否只想在第3个项目上一直删除这些项目，或者它也应该是其他li项目的通用规则。

因此我无法建议您应该关注哪个点击事件。但是我告诉你如何挂钩第3 li次点击：

$('ul li:nth-child(3)').click(function) {
      console.log("3rd item clicked");
});

单击后，jquery从列表中删除项目

2 个答案: