hide table header column

Question

I use jquery code to pull results for a search query on my website. I would like to hide one of the table's column headers when the results appear. I have made the appropriate changes in HTML and the table appears correct when I go directly to the search results page, but if I refresh the search results page or pull a new query from that page, the table reverts back to the original text.

My question is, how do I adjust the jquery code to hide the column header text from appearing everytime it refreshes?

Here is the jquery I am using

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, 'gtr': gtr};
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);
        } else {
            jQuery('.result_search_region').html(jQuery('#dt_no_schedule').html());
        }
    }
});

Here is the html I am using:

<?php
    $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>Start Date</td>
                <td class="alncenter">Duration</td>
                <td class="alncenter">Time</td>
                class="alncenter"></td>
                <td class="alncenter"></td>
            </tr>
        </thead>
        <tbody>

Answer 1

It seems a little unclear do want to remove the head once you get the data (might be a poor user experience), or are you getting multiple headers shown?

To hide the thead figure out where/when you want to hide the header with this:

  var elem = $("thead");  
  elem.css('visibility', 'hidden');  

Or if you keep getting multiple:
table
thead
thead
...

Then I'd suggest the DOM node you're updating/replacing isn't correct. I'd suggest you look at replacing the tbody alone on update and get remove the thead in the html your graft in. One thing about the code, as someone that needs to test stuff alot, where are the ID's on your elements, make everyone's life easier.... :)