remove elements onward which starting point is the clicked element parent
<p>How can I remove elements onward which starting point is the clicked element parent?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $('.breadcrumb li a').click(function(){
    
    
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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:'/';}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;


&lt;ol class="breadcrumb"&gt;
  &lt;li&gt;
    &lt;a href="#" class="active parent" data-folder="1f"&gt;parent&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" class="active" data-folder="1f-f1"&gt;parent sub 1&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" class="active" data-folder="1f-f2"&gt;parent sub 2&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" class="active" data-folder="1f-f3"&gt;parent sub 3&lt;/a&gt;
  &lt;/li&gt;
&lt;/ol&gt;</code></pre>
</div>
</div>
</p>

<p>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?</p>