Code Demon Code Demon - 6 months ago 13
jQuery Question

remove elements onward which starting point is the clicked element parent

How can I remove elements onward which starting point is the clicked element parent?



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





Above is my snippet, so If I click unto the element that has a text of 'parent', all the elements onwards after to the clicked element parent (li) which is the starting point should be remove. Any help, ideas, clues, suggestions, recommendations please?

Answer

You can use .parent(), .nextAll() with selector "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>

Comments