jQuery remove class on closest

Question

I'm trying to action a removeClass request using jQuery. Most of the below script is working fine except for the $(this).closest('.press-continue').removeClass('hidden'); part.

I have posted the jQuery and HTML below. Any ideas what could be the problem?

$(function () {
    $('.step2').on('click', '.btn-book', function (e) {
        $.ajax({
            url: '/reserve/' + this.id,
            type: 'get',
            dataType: 'json',
            context: this,
            success: function (json) {
                if (json['success']) {
                    $(this).addClass('btn-selected');
                    $('.btn-book').not(this).addClass('book-disabled').prop('disabled', true);
                    $('.next-step-hidden').addClass('show-button').prop('href', '/confirm/' + this.id);
                    $('.cancel').addClass('show-button').prop('id', this.id);
                    $('.alert-danger').addClass('hidden-error');
                    $(this).closest('.press-continue').removeClass('hidden');
                } else if (json['error']) {
                    if (json['error'] == 1) {
                        alert("Another user has already booked this slot, please choose another slot.");
                        $(this).addClass('btn-selected').addClass('book-disabled').prop('disabled', true);
                    }
                }
            }
        });
    });
});

HTML

<div id="main">
    <h2 class="info-bar clearfix"><b>Select parking time</b> <span>Step <i>2</i></span></h2>
    <div class="alert alert-danger hidden-error">
        <strong>Expired!</strong> Sorry, the slot that you reserved has now expired. Please choose another slot below.
        <br><i>Note: slots are reserved for 15 minutes.</i>
    </div>
    <form class="step2">
        <fieldset>
            <legend><span>Select a Parking Slot</span></legend>
            <div class="parking-time">
                <div class="input-row">
                    <label class="label">12/06/2015
                        <br>Morning
                        <br>7am - 1pm</label>
                    <button class="btn btn-small btn-important btn-book" type="button" id="67"><i>book</i><b>reserved</b></button>
                    <span class="press-continue hidden">Press continue to confirm booking</span>
                </div>
                <div class="input-row">
                    <label class="label">12/06/2015
                        <br>Afternoon
                        <br>2pm - 7pm</label>
                    <button class="btn btn-small btn-important btn-book" type="button" id="68"><i>book</i><b>reserved</b></button>
                    <span class="press-continue hidden">Press continue to confirm booking</span>
                </div>
                <div class="input-row">
                    <label class="label">12/06/2015
                        <br>All Day
                        <br>&nbsp;</label>
                    <button class="btn btn-small btn-important btn-book" type="button" id="69"><i>book</i><b>reserved</b></button>
                    <span class="press-continue hidden">Press continue to confirm booking</span>
                </div>
            </div>
            <!-- end parking-time -->
            <div class="input-row input-row-last"> <a class="btn btn-small btn-info cancel">Cancel</a> <a class="btn btn-info next-step next-step-hidden">Continue <i class="sprite arrow"></i></a> </div>
        </fieldset>
    </form>
</div>
<!-- end main -->

Answer 1

.closest() is used to find an ancestor element, where as what you are looking for is the next sibling so you can use .next() $(this).next('.press-continue').removeClass('hidden');

$(function () {
    $('.step2').on('click', '.btn-book', function (e) {
        $.ajax({
            url: '/reserve/' + this.id,
            type: 'get',
            dataType: 'json',
            context: this,
            success: function (json) {
                if (json['success']) {
                    $(this).addClass('btn-selected');
                    $('.btn-book').not(this).addClass('book-disabled').prop('disabled', true);
                    $('.next-step-hidden').addClass('show-button').prop('href', '/confirm/' + this.id);
                    $('.cancel').addClass('show-button').prop('id', this.id);
                    $('.alert-danger').addClass('hidden-error');
                    $(this).next('.press-continue').removeClass('hidden');
                } else if (json['error']) {
                    if (json['error'] == 1) {
                        alert("Another user has already booked this slot, please choose another slot.");
                        $(this).addClass('btn-selected').addClass('book-disabled').prop('disabled', true);
                    }
                }
            }
        });
    });
});