Bagaimana cara mengambil data ketika kita klik li, maka yang diambil datanya hanya bagian level itu saja. Jadi kalo ada level di bagian atas atau bawahnya.. Akan dihapus

<div class="test">

     <div class="level">

          <ul class="nav nav--stacked">

               <li class="root-level">

                    <a class="">Pig</a>

                    <div class="level">

                         <ul class="nav nav--stacked">

                              <li class="root-level">

                                   <a class="">Pig child (1)</a>

                              </li>

                              <li class="root-level">

                                   <a class="">Pig child (2)</a>

                              </li>

                              <span class="section-divider"></span>

                              <li class="root-level">

                                   <a class="">Pig child (3)</a>

                                   <div class="level">

                                        <ul class="nav nav--stacked">

                                             <li class="root-level">

                                                   <a class="">Pig child child (1)</a>

                                             </li>

                                             <li class="root-level">

                                                   <a class="">Pig child child (2)</a>

                                             </li>

                                        </ul>

                                   </div>

                              </li>

                         </ul>

                    </div>

               </li>

               <li class="root-level">

                    <a class="">Chicken</a>

                    <div class="level">

                         <ul class="nav nav--stacked">

                              <li class="root-level">

                                   <a class="">Chicken child (1)</a>

                              </li>

                              <li class="root-level">

                                   <a class="">Chicken child (2)</a>

                                   <div class="level">

                                        <ul class="nav nav--stacked">

                                             <li class="root-level">

                                                   <a class="">Chicken child child (1)</a>

                                             </li>

                                             <li class="root-level">

                                                   <a class="">Chicken child child (2)</a>

                                             </li>

                                        </ul>

                                   </div>

                              </li>

                              <span class="section-divider"></span>

                              <li class="root-level">

                                   <a class="">Chicken child (3)</a>

                              </li>

                         </ul>

                    </div>

               </li>

 <span class="section-divider"></span>

               <li class="root-level">

                    <a class="">Duck</a>

                    <div class="level">

                         <ul class="nav nav--stacked">

                              <li class="root-level">

                                   <a class="">Duck child (1)</a>

                                   <div class="level">

                                        <ul class="nav nav--stacked">

                                             <li class="root-level">

                                                   <a class="">Duck child child (1)</a>

                                             </li>

                                             <li class="root-level">

                                                   <a class="">Duck child child (2)</a>

                                             </li>

                                        </ul>

                                   </div>

                              </li>

                              <li class="root-level">

                                   <a class="">Duck child (2)</a>

                              </li>

                              <span class="section-divider"></span>

                              <li class="root-level">

                                   <a class="">Duck child (3)</a>

                              </li>

                         </ul>

                    </div>

               </li>

          </ul>

     </div>

</div>

<div class="result"></div>



$(document).on('click', 'li', function(e) {

      $('.result').html(   $(this).closest("level").parent('level').remove().child('level').remove(); );// asumsi saja

});

CONTOH RESULT NYA

Ini jika kita habis klik li, maka level pada bagian atas dan bawahnya akan menghilang



                    <div class="level">

                         <ul class="nav nav--stacked">

                              <li class="root-level">

                                   <a class="">Chicken child (1)</a>

                              </li>

                              <li class="root-level">

                                   <a class="">Chicken child (2)</a>

                              </li>

                              <span class="section-divider"></span>

                              <li class="root-level">

                                   <a class="">Chicken child (3)</a>

                              </li>

                         </ul>

                    </div>

Dan ini jika habis klik li bagian level tingkat pertama, jadi semua .level child akan hilang



     <div class="level">

          <ul class="nav nav--stacked">

               <li class="root-level">

                    <a class="">Pig</a>

               </li>

               <li class="root-level">

                    <a class="">Chicken</a>

               </li>

               <span class="section-divider"></span>

               <li class="root-level">

                    <a class="">Duck</a>

               </li>

          </ul>

     </div>

Dan ini kalo kita klik li pada .level tingkat yang terakhir. Jadi semua .level diatasnya dihapus



                                   <div class="level">

                                        <ul class="nav nav--stacked">

                                             <li class="root-level">

                                                   <a class="">Duck child child (1)</a>

                                             </li>

                                             <li class="root-level">

                                                   <a class="">Duck child child (2)</a>

                                             </li>

                                        </ul>

                                   </div>