删除索引大于然后单击的元素

Question

$(document).on('click', '.crumb', function () {
var i = $(this).index('.crumb');
$('#path *:gt(i)').remove();
});

.crumb{
display:inline-block;
margin:0 7px;
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
<div class='crumb'>home</div>
<div class='crumb'>comp</div>
<div class='crumb'>display</div>
<div class='crumb'>reset</div>
</div>

我希望从path中删除索引大于被单击元素的所有元素。

因此，单击display应该删除reset。单击comp应该删除display and reset。依此类推。

但这不起作用。

Answer 1

您可以使用jQuery nextAll()方法在单击后返回所有兄弟姐妹，如下所示：

在此处检查文档：https://api.jquery.com/nextAll/

$(document).on('click', '.crumb', function() {
  $(this).nextAll().remove();
});

.crumb {
  display: inline-block;
  margin: 0 7px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
  <div class='crumb'>home</div>
  <div class='crumb'>comp</div>
  <div class='crumb'>display</div>
  <div class='crumb'>reset</div>
</div>

Answer 2

您可以使用jQuery.nextAll

$(document).on('click', '.crumb', function () {
    $(this).nextAll(".crumb").remove();
});

.crumb{
display:inline-block;
margin:0 7px;
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
<div class='crumb'>home</div>
<div class='crumb'>comp</div>
<div class='crumb'>display</div>
<div class='crumb'>reset</div>
</div>

Answer 3

您可以使用nextAll来实现，请检查以下内容：

$(document).on('click', '.crumb', function () {
  var that = $(this);
  that.nextAll().remove();
});

.crumb{
  display:inline-block;
  margin:0 7px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
  <div class='crumb'>home</div>
  <div class='crumb'>comp</div>
  <div class='crumb'>display</div>
  <div class='crumb'>reset</div>
</div>