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.

Answer 2

It's because you run that selector from click handler you should use this instead:

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

Answer 3

Try using this function to get the parent:

var $currentId = $(this).parents().first();

I've never used the .closest() function but according to jQuery what you have specified should work. Either way, try that out and tell me how it goes.

You also need to make it so that it selects the current element by using $(this)