Clear table body before popular again with Jquery and Ajax

Question

I have the following function:

$("#numeroRequisicao").change(function() {
    var numeroRequisicao = $(this).val();
    $.ajax({
        type: "POST",
        url: "../controller/ajax.selectItemRequisicaoPesquisar.php?numeroRequisicao="+numeroRequisicao,
        dataType: "JSON",
        success: function(res) {
            for(var i=0; i<res.length; i++)
            {
                $("#tab_logic").append('<tr class="text-center"><td>'+i+'</td><td>'+res[i].nome_GAThemocomponente+'</td><td>'+res[i].qtd_GATitemRequisicao+'</td><td>'+res[i].frequencia_GATitemRequisicao+'</td><td>'+res[i].cirurgia_GATitemRequisicao+'</td></tr>');
            }
        }
    });
});

And the following table in HTML:

<table class="table table-bordered table-striped" id="tab_logic">
    <thead> 
        <tr>
            <th class="text-center" style="width: 5%;">Indice</th>
            <th class="text-center" style="width: 25%;">Hemocomponente</th>
            <th class="text-center" style="width: 15%;">Quantidade</th>
            <th class="text-center">Frequência (Aviso)</th>
            <th class="text-center">Cirurgia (Aviso)</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

When the user clicks the button btnPesquisar, the Ajax function will be fired, picks up the items and fills the table, is working correctly this, the problem is the following:

If the user chooses the Code 1 request and clicks the button btnPesquisar, will populate the table with the code request items 1, but if the user does not give refresh on the page and wants to see the code request 2, the code request items 2 will be added to the table without it being cleaned, thus, the items of the request previously seen together with those of the request currently seen.

How could I clear the table before filling in the new data?

Answer 1

Generates a string with everything and so you can delete everything at once:

success: function(res) {
    var html = res.reduce(function(string, obj, i) {
      return string + '<tr class="text-center"><td>' + i + '</td><td>' + obj.nome_GAThemocomponente + '</td><td>' + obj.qtd_GATitemRequisicao + '</td><td>' + obj.frequencia_GATitemRequisicao + '</td><td>' + obj.cirurgia_GATitemRequisicao + '</td></tr>'
    }, '');
    $("#tab_logic tbody").html(html);
}