How to hide all elements except the last one (by class) using jQuery

Question

I have a menu that looks like this (1 list item as an example):

<ul class="dyn makeLink" style="display: block;">
    <li id="licategory_1">
        <a href="/nfl-lines" title="" class="linkItem">
            <strong>NFL</strong>
        </a>
        <span class="expCollPos" >
            <span class="collapsed"></span>
        </span>
        <span class="expCollPos linkItem" >
            <span class="collapsed"></span>
        </span>
        <span class="expCollPos" >
            <span class="collapsed"></span>
        </span>
    </li>


    <li id="licategory_2">
    ... 
    </li>

</ul>

Which has for some strange reason 3 spans(.expCollPos), the two first ones aren't relevant for me and I'm trying to remove ONLY them using jQuery.

I tried using: $('.dyn li span.expCollPos:last-child').css("display", "none");

and several others - but it just removes all of the .expCollPos classes.

Am I doing something wrong?

(I got a code that I have to edit and it looks horrable! The javascript functions are unclear and the CSS has so much "!important" that I cant find what's what. )

Answer 1

$('body').find('.teads-inread:not(:last)').hide();

https://jsfiddle.net/mbrasil/n0reckgv/

Answer 2

Try

$(".dyn li span.expCollPos").slice(-1).hide();

$(".dyn li span.expCollPos").slice(-1).hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="dyn makeLink" style="display: block;">
    <li id="licategory_1">
        <a href="/nfl-lines" title="" class="linkItem">
            <strong>NFL</strong>
        </a>
        <span class="expCollPos" >
            <span class="collapsed">1</span>
        </span>
        <span class="expCollPos linkItem" >
            <span class="collapsed">2</span>
        </span>
        <span class="expCollPos" >
            <span class="collapsed">3</span>
        </span>
    </li>


    <li id="licategory_2">

    </li>

</ul>

Answer 3

You want to hide all but the last one, so you have to say not last like

$('.dyn li').find('span.expCollPos:not(:last)').hide();

Answer 4

Use this

$('#licategory_1 span.expCollPos').eq(2).show();