jquery - 删除列表中的最后一个子项

Question

我有一个列表，用作我正在构建的网站的侧边栏之一的飞出菜单。

我正在尝试删除最后一个 <li> item 通过 javascript，因为网站背后的 CMS 会动态构建此列表，因此我无法在 HTML 本身中删除它。

我遇到了一个奇怪的情况，我的代码适用于 IE、Safari 和 FireFox，但不适用于 Chrome。在 Chrome 的情况下，代码会删除列表的最后两项。

菜单/列表:

<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>

我的 JavaScript

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

Answer 1

为什么不直接隐藏它，使用 CSS 规则应该在所有情况下都有效:

.SideCategoryListFlyout ul.sf-menu > li:last-child {
   display:none;
}