title: JQuery Clear <ul> Two Menus Away
body: <p>I have three menus: College, Department and Program. When a College is clicked, the list of Departments belonging to that College is shown. When a Department is clicked, the list of Programs belonging to that Department is shown. </p>
  
  <p>My problem is that when I click a new College, the Departments re-populate in the second list but I can't get the Programs in the third column to clear out. I've tried a bunch of different things with .nextAll() and .siblings() and whatnot, but nothing has worked yet.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-xs-4"&gt;
      &lt;h4&gt;Colleges&lt;/h4&gt;
      &lt;ul class="colleges-menu"&gt;
          &lt;?php CommonFunctions::getCollege('list'); ?&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-4"&gt;
      &lt;h4&gt;Departments&lt;/h4&gt;
      &lt;ul id="departments" class="colleges-menu"&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-4"&gt;
      &lt;h4&gt;Programs&lt;/h4&gt;
      &lt;ul id="programs" class="colleges-menu"&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the JQuery:</p>
  
  <pre><code>function ajaxLists(){   
      var entity = '.' + $(this).attr('class');
      var nextEntity;
      var value;
      var data; 
      switch(entity){
          case '.college':
              nextEntity = '#departments';
              value = $(this).val();
              data = {list_college: value};
              break;  
          case '.departments':
              nextEntity = '#programs';
              value = $(this).val();
              data = {list_departments: value};
              break;
          default:
              break;  
      }
      //this should ONLY run if we are selecting a college or department
      if(entity == '.college' || entity == '.departments'){
          $("body").css("cursor", "progress");
          $.ajax({
              url: "sort_college.php",
              type: "post",
              data: data,
              success: function(info){
                $(nextEntity).html('');
                $(nextEntity).append(info);
                console.log(info);
              },
              error: function(){
                  alert("there's an error with AJAX");
              }
          }).done(function(){
              $("body").css("cursor", "default");
          }); //end ajax
      }
  }
  </code></pre>