Weird behavior with .parents() and .closest() when trying to return parent <ul> element id in jQuery

Question

So I've got 2 <ul> containers each with id's. Inside of them are a list of <li> elements.

The first <ul> is <ul id="coaches-list">. The second is <ul id="players-list">.

There are tags within each <li> that have an id called close (which is a link that I'm using as my selector), which will delete each <li> node once clicked. I'm trying to target each <ul> container to see where it is coming from.

My HTML is:

                <!-- coaches box -->
                <div class="box">
                    <div class="heading">
                        <h3 id="coaches-heading">Coaches</h3>
                        <a id="coaches" class="filter-align-right">clear all</a>
                    </div>
                    <ul id="coaches-list" class="list">
                        <li><span>Hue Jackson<a class="close"></a></span></li>
                        <li class="red"><span>Steve Mariuchi<a class="close"></a>                     </span></li>
                    </ul>
                </div>

                <!-- players box -->
                <div class="box">
                    <div class="heading">
                        <h3 id="players-heading">Players</h3>
                        <a id="players" class="filter-align-right">clear all</a>
                    </div>
                    <ul id="players-list" class="list">
                        <li><span>Steve Young<a class="close"></a></span></li>
                        <li><span>Gary Plummer<a class="close"></a></span></li>
                        <li><span>Jerry Rice<a class="close"></a></span></li>
                    </ul>
                </div>

My remove tag function in jQuery is:

function removeSingleTag() {
    $(".close").click(function() {

                    var $currentId = $(".close").closest("ul").attr("id");
                    alert($currentId);

        // find the closest li element and remove it
        $(this).closest("li").fadeOut("normal", function() {
            $(this).remove();
            return;
        });
    });
}

Whenever I click on each specific tag, it's removing the proper one I clicked on, although when I'm alerting $currentId, if I have:

            var $currentId = $(".close").closest("ul").attr("id");

It alerts 'coaches-list' when I'm clicking on a close selector in both <ul id="coaches-list" class="list"></ul> and <ul id="players-list" class="list"></ul>

If I change that to:

            var $currentId = $(".close").parents("ul").attr("id");

It has the same behavior as above, but alerts 'players-list', instead.

So when using closest(), it's returning the very first <ul> id, but when using parents(), it's returning the very last <ul> id.

Anyone know what is going on with this whacky behavior?

Answer 1

It's expected behavior.

You should use:

var $currentId = $(this).closest("ul").attr("id");

$(this) points at the clicked .close.

$(".close") points at the first one found.