Question

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

我正在尝试通过javascript删除最后一个<li>项目，因为网站后面的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;
}

Answer 2

也许Chrome正在加载窗口两次。通常等待文档准备就绪，而不是等待窗口加载。试试这个：

<script type="text/javascript">
$(document).ready(function(){
    $('.SideCategoryListFlyout ul li:last').remove();
});
</script>

编辑：

我已经在Chrome和FireFox中检查了这项工作，请点击此处：http://jsfiddle.net/n6fQ8/

Answer 3

看起来像你的CMS使用Superfish的插件

像这样破解..

$('.SideCategoryListFlyout').on('mouseenter.sfremove',function(){
        $('>ul > li', this).last().remove();
        $(this).off('mouseenter.sfremove');
});

演示：http://jsfiddle.net/2hFXx/2

Answer 4

你可以尝试这个：

$('.SideCategoryListFlyout li').last().remove();

或者如果你想要几个李，你可以使用这个：$('.SideCategoryListFlyout').children().slice(0, n).remove();

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

4 个答案: