title: Removing last child in list
body: <p>I have a list which is used as a fly out menu from one of the sidebars of a site I am building.</p>
  
  <p>I am trying to remove the last <code>&lt;li&gt;</code> item via javascript as the CMS behind the site builds this list on the fly, so I cannot remove it in the HTML per se.</p>
  
  <p>I have run into an odd situation whereby the code I have works with IE, Safari and FireFox but not Chrome. In Chrome's case the code removes the last two items of the list. </p>
  
  <p>Menu / list:</p>
  
  <pre><code>&lt;div class="SideCategoryListFlyout"&gt;
     &lt;ul class="sf-menu sf-vertical sf-js-enabled"&gt;
        &lt;li&gt;
           &lt;a class="sf-with-ul" href="http://myurl/clearance/"&gt;
           Clearance
           &lt;span class="sf-sub-indicator"&gt; »&lt;/span&gt;
           &lt;/a&gt;
           &lt;ul style="display: none; visibility: hidden;"&gt; &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
           &lt;a class="sf-with-ul" href="http://myurl/Promotions/"&gt;
           Promotions
           &lt;span class="sf-sub-indicator"&gt; »&lt;/span&gt;
           &lt;/a&gt;
           &lt;ul style="display: none; visibility: hidden;"&gt; &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
           &lt;a class="sf-with-ul" href="http://myurl/Notebooks/"&gt;
           Notebooks
           &lt;span class="sf-sub-indicator"&gt; »&lt;/span&gt;
           &lt;/a&gt;
           &lt;ul style="display: none; visibility: hidden;"&gt; &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;                                                          &lt;-- REMOVE
           &lt;a class="sf-with-ul" href="http://myurl/REMOVE/"&gt;         &lt;-- REMOVE
           REMOVE                                                     &lt;-- REMOVE  
           &lt;span class="sf-sub-indicator"&gt; »&lt;/span&gt;                   &lt;-- REMOVE
           &lt;/a&gt;                                                       &lt;-- REMOVE  
           &lt;ul style="display: none; visibility: hidden;"&gt; &lt;/ul&gt;      &lt;-- REMOVE
        &lt;/li&gt;                                                         &lt;-- REMOVE
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(window).load(function(){
      $('.SideCategoryListFlyout li:last-child').remove();
  });
  &lt;/script&gt;
  </code></pre>