CODEWITHSUNDEEP
jquerylist
TheRealPapa
TheRealPapa

Reputation: 4539

Removing last child in list

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>

Upvotes: 2

Views: 3434

Answers (4)

A. Wolff
A. Wolff

Reputation: 74420

Why not just hide it, using CSS rule should work in all case:

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

Upvotes: 3

l2aelba
l2aelba

Reputation: 22167

Seems like your CMS using Superfish's plug-in

hack like this..

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

Demo : http://jsfiddle.net/2hFXx/2

Upvotes: 0

Jimmery
Jimmery

Reputation: 10139

Perhaps Chrome is loading the window twice. It is common to wait for the document to be ready, rather than for the window to load. Try this:

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

EDIT:

Ive checked this works, in both Chrome and FireFox, here: http://jsfiddle.net/n6fQ8/

Upvotes: 1

Momo1987
Momo1987

Reputation: 544

You can try this one:

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

or if you wanna for few li you can use this one : $('.SideCategoryListFlyout').children().slice(0, n).remove();

Upvotes: 0

Related Questions