向前移除元素哪个起始点是单击元素父

Question

如何删除前面的元素哪个起始点是被点击的元素父元素？

$(document).ready(function(){
  $('.breadcrumb li a').click(function(){
    
    
  });
});

.breadcrumb,.breadcrumb li{list-style:none;}
.breadcrumb li{float:left;margin:3px;}
.breadcrumb li a{text-decoration:none;outline:none;}
.breadcrumb li:not(:first-child):before{content:'/';}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ol class="breadcrumb">
  <li>
    <a href="#" class="active parent" data-folder="1f">parent</a>
  </li>
  <li>
    <a href="#" class="active" data-folder="1f-f1">parent sub 1</a>
  </li>
  <li>
    <a href="#" class="active" data-folder="1f-f2">parent sub 2</a>
  </li>
  <li>
    <a href="#" class="active" data-folder="1f-f3">parent sub 3</a>
  </li>
</ol>

上面是我的代码片段，所以如果我点击具有'parent'文本的元素，则应该删除作为起始点的单击元素parent（li）之后的所有元素。请提供任何帮助，想法，线索，建议和建议吗？

Answer 1

您可以使用.parent()，.nextAll()与选择器"li"，.remove()

$(document).ready(function(){
  $(".breadcrumb li a").click(function(){
      $(this).parent().nextAll("li").remove() 
  });
});

.breadcrumb,.breadcrumb li{list-style:none;}
.breadcrumb li{float:left;margin:3px;}
.breadcrumb li a{text-decoration:none;outline:none;}
.breadcrumb li:not(:first-child):before{content:'/';}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ol class="breadcrumb">
  <li>
    <a href="#" class="active parent" data-folder="1f">parent</a>
  </li>
  <li>
    <a href="#" class="active" data-folder="1f-f1">parent sub 1</a>
  </li>
  <li>
    <a href="#" class="active" data-folder="1f-f2">parent sub 2</a>
  </li>
  <li>
    <a href="#" class="active" data-folder="1f-f3">parent sub 3</a>
  </li>
</ol>