CODEWITHSUNDEEP
javascriptjquery
Juliver Galleto
Juliver Galleto

Reputation: 9037

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?

Upvotes: 0

Views: 61

Answers (1)

guest271314
guest271314

Reputation: 1

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>

Upvotes: 1

Related Questions