How to empty HTML table that is filled using AJAX?

Question

I'm using AJAX to sort table column by the header link, the problem is whenever I click the link the table not repopulated but instead the rows get repeated, I want to keep the header but empty the table contents, this is the ajax code:

<script type="text/javascript">
        $(document).ready(getData('asc'))
        function getData(sort) {
            $("#tbl > td").empty();

            var srt = sort;

            $.ajax({
                type: 'GET',
                url: '/Book/BooksData?sort=' + srt,
                dataTtype: 'json',
                success: function (data) {
                    $.each(data, function (index, val) {
                        $('#tbl').append('<tr><td>' + val.Title + '</td><td>' + val.Author.Name + '</td></tr>')
                    });
                }
            });
        }
    </script>

the HTML:

<table id="tbl" class="table">
    <tr>
        <th>
            <a style="cursor: pointer" onclick="getData('@ViewBag.Sort')" id="sort">Title</a>
        </th>
        <th>
            Author
        </th>
        <th></th>
    </tr>
</table>

in the jQuery code I also tried tbl and tbl>tr and remove function but none works!

UPDATE:

As Zakaria Acharki suggests in his answer, I made these changes:

HTML:

<table id="tbl" class="table">
    <thead>
        <tr>
            <th>
                <a style="cursor: pointer" onclick="getData('@ViewBag.Sort')" id="sort">Title</a>
            </th>
            <th>
                Author
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JS:

<script type="text/javascript">
    $(document).ready(getData('asc'))
    function getData(sort) {
        var srt = sort;
        $('#tbl>tbody').html('<tr><td>Title</td><td>Author Name</td></tr>'); // why did you add this?

        $.ajax({
            type: 'GET',
            url: '/Book/BooksData?sort=' + srt,
            dataTtype: 'json',
            success: function (data) {
                $.each(data, function (index, val) {
                    $('#tbl>tbody').html('<tr><td>' + val.Title + '</td><td>' + val.Author.Name + '</td></tr>');
                });
            }
        });
    }
</script>

but when the page loads there is only one row rendered, also there is a line below the header:

Answer 1

You could use thead/tbody then use .empty() to remove the current data and .append() to add the new data from the ajax request.

HTML :

<table id="tbl" class="table">
    <thead>
      <tr>
        <th>
            <a style="cursor: pointer" onclick="getData('@ViewBag.Sort')" id="sort">Title</a>
        </th>
        <th>
            Author
        </th>
        <th></th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

JS :

$('#tbl>tbody').empty();

$.each(data, function (index, val) {
    $('#tbl>tbody').append('<tr><td>' + val.Title + '</td><td>' + val.Author.Name + '</td></tr>');
});

Hope this helps.

$(document).ready(getData('asc'))
function getData(sort) {
  $('#tbl>tbody').empty();
  
  var data = {1:'a',2:'b',3:'c'};
  
  $.each(data, function (index, val) {
    $('#tbl>tbody').append('<tr><td>Title</td><td>Author Name</td></tr>');
  });


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl" class="table">
  <thead>
    <tr>
      <th>
        <a style="cursor: pointer" onclick="getData('@ViewBag.Sort')" id="sort">Title</a>
      </th>
      <th>
        Author
      </th>
      <th></th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>