I have a list which is used as a fly out menu from one of the sidebars of a site I am building.

I am trying to remove the last `<li>` 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.

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. 

Menu / list:

```
<div class="SideCategoryListFlyout">
   <ul class="sf-menu sf-vertical sf-js-enabled">
      <li>
         <a class="sf-with-ul" href="http://myurl/clearance/">
         Clearance
         <span class="sf-sub-indicator"> »</span>
         </a>
         <ul style="display: none; visibility: hidden;"> </ul>
      </li>
      <li>
         <a class="sf-with-ul" href="http://myurl/Promotions/">
         Promotions
         <span class="sf-sub-indicator"> »</span>
         </a>
         <ul style="display: none; visibility: hidden;"> </ul>
      </li>
      <li>
         <a class="sf-with-ul" href="http://myurl/Notebooks/">
         Notebooks
         <span class="sf-sub-indicator"> »</span>
         </a>
         <ul style="display: none; visibility: hidden;"> </ul>
      </li>
      <li>                                                          <-- REMOVE
         <a class="sf-with-ul" href="http://myurl/REMOVE/">         <-- REMOVE
         REMOVE                                                     <-- REMOVE  
         <span class="sf-sub-indicator"> »</span>                   <-- REMOVE
         </a>                                                       <-- REMOVE  
         <ul style="display: none; visibility: hidden;"> </ul>      <-- REMOVE
      </li>                                                         <-- REMOVE
   </ul>
</div>

```

My Javascript

```
<script type="text/javascript">
$(window).load(function(){
    $('.SideCategoryListFlyout li:last-child').remove();
});
</script>

```