Reset table row after successful ajax jquery done in laravel blade-CodePudding

I have a purchase due list table in my laravel project. While clicking in a purchase id I want to show the purchase detail in a modal table using Ajax request and after successfully showing the result want to reset the modal table automatically. But in my code modal table is not automatically reset though I am using $('#datatable').reset();.

Modal Table

<table id="datatable" >
<thead >
    <tr>
        <th>Item Name</th>
        <th>Qty</th>
        <th>Unit Price</th>
        <th>Total Amount</th>
    </tr>
</thead>
<tbody id="item-tbody">
</tbody>

Ajax

$(".purchase_invoice").click(function(event) {
var pi_id = $(this).attr('href');
var table = '';

$.ajax({
            url: "{{ url('purchase-invoice-detail') }}"    "/"   pi_id,
            type: "get",
            success: function(response){

                $.each( response, function( key, data ) {
                    $.each( data, function( key, value ) {

                        $(".pi_no").html(value['purchases_id']);
                        $(".pi_date").html(value['updated_at']);

                    table  = '<tr>';
                        table  = '<td>';
                            table  = value['name'];
                        table  = '</td>';
                        table  = '<td>';
                            table  = value['quantity'];
                        table  = '</td>';
                        table  = '<td>';
                            table  = value['unit_price'];
                        table  = '</td>';
                        table  = '<td>';
                            table  = value['total_amount'];
                        table  = '</td>';
                    table  = '</tr>';
                    });
                });

                table  = '<tr>';
                    table  = '<td colspan="3">Net Payable Amount:';
                    table  = '</td>';
                    table  = '<td colspan="1">';
                        table  = response[0][0]['net_payable_amount'];
                    table  = '</td>';
                table  = '</tr>';

                $('#item-tbody').append(table);

                $("#viewModal").modal('show');
                $('#datatable').reset();

            },
                error: function(response){
                alert('Error' response);
            }
        });
});

Where is the problem? Anybody help please?

CodePudding user response：

Probably you should change $('#datatable').reset(); to:

$('#item-tbody').html('');

document.getElementById("item-tbody").value = "";