Header of grid stays after removal of all data of grid laravel - ajax

Question

I have a design of grid in controller that displays me all data of selected check boxes.
This grid gets appended to a span through ajax.
While performing a delete request, one by one my data in grid gets deleted,
but the grid header stays as it is.
This is my design of grid in controller:
$res_div = '';
$res_div.='<table width="100%" border="0" class="table table-striped table-bordered table-hover">';
$res_div.='<tr>
<th width="100%">SublawId</th>
<th width="100%">Sublawname</th>
<th width="100%">View</th>
<th width="100%">Update</th>
</tr>';
foreach ($law as $sublaw)
{
$law_details = DB::table('tbl_law_sub_master')->where('id', $sublaw->id)->select('*')->first();
$res_div.='<tr>
<td>
<strong>'.$law_details->lms_id.'</strong>
</td>
<td>
<strong>('.$law_details->sub_law_name.')</strong>
</td>
<td align="center">
<input type="checkbox" id="cb1" onclick="ts(this)" class="cb1" name="viewsub_'.$sublaw->id.'">
</td>
<td align="center">
<input type="checkbox" id="cb1" onclick="ts(this)" class="cb1" name="updatesub_'.$sublaw->id.'">
</td>
</tr>';
}
$res_div.='</table>';
$data=array(
'res_div'=>$res_div,
'law'=>$law
);
return json_encode($data);
my ajax request on blade:
$.ajax({
url: "{{ URL::to('staff/staffpostsublawsdata') }}?sub_law_id="+sublaw_ids.join(),
type: 'POST',
dataType: "json",
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
var res_sublaw_content=returndata.res_div;
var data = document.getElementById("append_sublaw_grid").innerHTML = ""; $('#append_sublaw_grid').append(res_sublaw_content);
return false;
}
});
On deletion all data gets deleted one by one from grid, but its header stays..
A screenshot:

Answer 1

Everytime you remove a row u can count the number of rows left using
var rowCount = $('.table tbody tr').length;
if rowcount goes to 0 then just hide the table using
$('.table').hide()
Working example:
Put this code in the function where you delete the rows
var rowCount = $('.table tbody tr').length;
if( rowcount == 0){
$('.table').hide();
}