如何使用jQuery从最近的跨度中删除类？

Question

I have a page that allows visitors to add favorites to a list. It uses repeating rows to show items so generic classes are repeated.

How can I show a single modal window (.closest or .prev?) if they all have the same class?

Here is my fiddle: http://jsfiddle.net/psasj74L/

<span class="jsCrateMaxModal most-wanted-modal-container hide">
    <div class="most-wanted-modal">
        <div class="most-wanted-content">
            One.
            <div class="col-xs-12">
                <div class="btn-primary btn-block">OK</div>
            </div>
        </div>
    </div>
</span>
<button class="jsShowMaxModal mostWantedOff">Show Modal</button>

jQuery:

$('.jsShowMaxModal').click(function () {
    $(".jsCrateMaxModal").closest("span").removeClass("hide");
});

$('.most-wanted-modal-container').click(function () {
    $('.jsCrateMaxModal').addClass("hide");
});

Answer 1

You can use .prev() in this case to find the modal preceding the button.

$('.jsShowMaxModal').click(function () {
    $(this).prev(".jsCrateMaxModal").closest("span").removeClass("hide");
});

Working example: http://jsfiddle.net/psasj74L/2/

However, this is a little flaky, and I would recommend wrapping the span and button in a div which offers some logical grouping. If this is not possible, an alternative is to use data attributes to specify which modal a button should open.