как очистить данные таблицы перед каждым вызовом ajax

Question

Данные таблицы не очищаются после каждого вызова ajax.Новые данные добавляются ниже предыдущих данных

$ ('# show_data'). Remove ();Я пробовал это, но он не работает

Просмотр

<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>
    $(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>

Текущий вывод

Ввод-> 2019-05-25 -> Отправить

Ввод-> Данные 1 Данные 2

Ввод-> 2019-05-24 -> Отправить

Выход-> Данные 1 Данные 2 Данные 3

Ожидаемый результат

Вход-> 2019-05-25 -> Отправить

Выход->Данные 1 Данные 2

Ввод-> 2019-05-24 -> Отправить

Ввод-> Данные 3

Answer 1

Это потому, что вы добавляете свой ответ к предыдущим данным. Попробуйте вот так

$.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

Вы можете попробовать изменить код

$('#show_data').remove();

до

$('#show_data').empty();

Функция

empty() очистит содержимое элемента. Документы здесь https://api.jquery.com/empty/