title: JQuery basics about child and parent elements
body: <p>My code for a 2 level menu goes like this:</p>
  
  <pre><code>&lt;ul class="nav nav-stacked navbar-fixed" id="side-menu"&gt;
      &lt;li class="active "&gt;
          &lt;a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page"&gt;
              &lt;i class="fa fa-home fa-fw"&gt;&lt;/i&gt; Home 
              &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class=""&gt;
          &lt;a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz"&gt;
              &lt;i class="fa fa-users fa-fw"&gt;&lt;/i&gt; Level 1
              &lt;span class="destruct" style="float:right"&gt;X&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li class="nav-header"&gt;
          &lt;a href="#" data-toggle="collapse" data-target="#comMenu"&gt;
              &lt;i class="fa fa-cogs fa-fw"&gt;&lt;/i&gt; Level 1
              &lt;i class="fa fa-caret-down fa-fw"&gt;&lt;/i&gt;
              &lt;span class="destruct" style="float:right"&gt; X &lt;/span&gt;
          &lt;/a&gt;
  
          &lt;ul class="nav nav-second-level nav-stacked collapse " id="comMenu"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;i class="fa fa-exchange fa-fw"&gt;&lt;/i&gt; Level 2.1
                  &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;i class="fa fa-download fa-fw"&gt;&lt;/i&gt; Level 2.2
                  &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;i class="fa fa-check-circle fa-fw"&gt;&lt;/i&gt; Level 2.3
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>Now I want to select the span with <code>id=destruct</code>, which is at level 1 and on click remove entire html in the li (including the second level ul tag). You must have got it that I am trying to make a <code>"X"</code>, upon clicking which the menu item and any sub-menu item deletes.</p>
  
  <p>However, I need your help in selecting the correct elements. For only Level 1 menu, the following jQuery code works:</p>
  
  <pre><code>$(".destruct").click(function(e){
           $(this).parent().remove();
    });
  </code></pre>
  
  <p>What could be the correct selector for Level 2 menu? I tried a few options like nth children and all, but cant seem to get it right.</p>