Hide <td> from table after AJAX refresh

Question

I have an HTML table with a hidden column (td class="gtr"). When I refresh the browser, the column stays hidden. However, there is a submit button in the middle of the page where users are asked to input their location (region). This button uses AJAX. When I refresh the AJAX (using the submit button), the table reveals the column I'm trying to hide.

Any suggestions on how I can automatically hide this column after AJAX refresh?

Here is the HTML:

            $schedule_in_arr = Direction_Session::get('schedule_id');
            $data_by_time = Direction_Session::get('data_by_time', array());
            ?>
            <?php if (!empty($value['schedule_info'])): ?>
                <table class="jz-table jz-table-bordered jz-table-striped">
                    <caption><?php echo $value['location_name']; ?></caption>
        <?php if (!empty($value['schedule_info'])): ?>
                        <thead>
                            <tr>
                                <td class="start">Start Date</td>
                                <td class="duration" style="text-align: center;">Duration</td>
                                <td class="time" style="text-align: center;">Time</td>
                                <td class="gtr" style="display:none"><span class="jz-popover-item" data-content="Guaranteed to Run">GTR</span></td>
                            </tr>
                        </thead>
                        <tbody>

Here is the Javascript:

var DirectionsBaseCourses = function () {
var handleValidation = function () {
    jQuery('.loading').hide();
    jQuery('#btnShowClases').click(function () {
        var region_id = jQuery('#region_id').val();
        var from_date = jQuery('#fromDate').val();
        var to_date = jQuery('#toDate').val();
        var course_no = jQuery('#course_no').val();
        var course_id = jQuery('#course_id').val();
        if (region_id == "") {
            jQuery('<div title="Message">Please select a region</div>').dialog({
                modal: true,
                width: 200,
                height: 100
            });
        } else {
            jQuery('.loading').show();
            var dataArr = {'region_id': region_id, 'from_date': from_date, 'to_date': to_date, 'course_no': course_no, 'course_id': course_id,};
            jQuery.ajax({
                url: Drupal.settings.basePath + "course/search/region/api",
                type: 'post',
                cache: false,
                datatype: 'json',
                data: dataArr,
                success: function (result) {
                    jQuery('.loading').hide();
                    var parsed = JSON.parse(result);
                    //jQuery('.result_search_region').html(result.data);
                    if (parsed.data.length > 0) {
                        jQuery('.result_search_region').html(' ');
                        jQuery('.result_search_region').append('<h5>Course Availability</h5>');
                        jQuery('.result_search_region').append(parsed.data);
                            $('td table').empty();
                    }
                    else{
                        jQuery('.result_search_region').html(jQuery('#dt_no_schedule').html());
                    }


                }
            });
        }
    });
};
return {
    init: function () {
        handleValidation();
    }
};

}();

Answer 1

If the column still there in the DOM with the same class gtr you can hide it in success using :

$('.gtr').hide();

Hope this helps.