how to clear data of a table before each ajax call - php

Question

Table data is not cleared after each ajax call. New data is appended below the previous data
$('#show_data').remove();
I have tried this but its not working
View
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Date</th>
<th>Time</th>
<th>Action</th>
</tr>
</thead>
<tbody id="show_data">
</tbody>
</table>
Script
<script>
$(document).ready(function () {
//Date picker
$('#datepicker').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
});
$("#datepicker").attr("autocomplete", "off");
$(document).on('submit','#myform',function(){
event.preventDefault();
var date = $('#datepicker').val();
console.log(date);
$('#show_data').remove();
$.ajax({
type:"POST",
url:"<?php echo base_url().'admin/Dashboard/get_blog'; ?>",
data:{date:date},
dataType: "json",
success:function(data) {
console.log(data[0].blog_id);
let i;
for(i=0;i<data.length;i++){
$('#show_data').append('<tr><td>' + data[i].article_name + '</td>' +
'<td>' + data[i].description + '</td>' +
'<td>' + data[i].date + '</td>' +
'<td>' + data[i].time + '</td>' +
'</tr>');
}
},
error: function() {
alert("oops...");
},
});
});
});
</script>
Present Output
Input-> 2019-05-25 -> Submit
Output-> Data 1
Data 2
Input-> 2019-05-24 -> Submit
Output-> Data 1
Data 2
Data 3
Expected Output
Input-> 2019-05-25 -> Submit
Output-> Data 1
Data 2
Input-> 2019-05-24 -> Submit
Output-> Data 3

Answer 1

Its because you append your response to previous data. Try this way
$.ajax({
type:"POST",
url:"<?php echo base_url().'admin/Dashboard/get_blog'; ?>",
data:{date:date},
dataType: "json",
success:function(data) {
console.log(data[0].blog_id);
let i;
let html= '';
for(i=0;i<data.length;i++){
html += '<tr><td>' + data[i].article_name + '</td>' +
'<td>' + data[i].description + '</td>' +
'<td>' + data[i].date + '</td>' +
'<td>' + data[i].time + '</td>' +
'</tr>');
}
$('#show_data').html(html);
},
error: function() {
alert("oops...");
},
});

Answer 2

You can try change code
$('#show_data').remove();
to
$('#show_data').empty();
empty() function will clear content of the element. Docs is here https://api.jquery.com/empty/