Listing duplicate data when performing SQL and performing . load()

Question

I looked in several places, including in the jQuery documentation and did not find a solution. I need a light of what to do on this occasion. I apologize if it is not very clear, I have never been much of participating in forum and asking for help in this part of programming.

The system is MVC. I perform the listing by doing the load() of an html page in my <div class="conteudo">, and within this external html, it has a <table> and a <script> the listing of such data.

This works normally by listing the data in its proper places in the table, however when I do a DELETE in the table, it returns in the .done(), one load() again in this mine div with the listing page (external html), and the cat jump is there, it lists the data after the DELETE, duplicates.

When I press the "Registered Students" button it will list the data with the imported html

By clicking on the recycle bin (Deleted the id=4), it deletes the record and imports the html again to list the new table, but with repeated data

If you need me, here’s the code html external that I’m importing into my page:

<table class="table table-hover table-responsive-sm display compact cell-border" id="alunos" style="width: 100%;">
    <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">Nome</th>
            <th scope="col">RM</th>
            <th scope="col">Celular</th>
            <th scope="col">OP</th>
        </tr>
    </thead>
</table>

<script src="src/alunos/controller/list-alunos.js"></script>
<script src="src/alunos/controller/delete-aluno.js"></script>

The delete-aluno.js that realizes the DELETE:

$(document).ready(() => {
    $('.conteudo').on('click', '.btn-delete-aluno', function() {
        $.ajax({
            url: 'src/alunos/model/delete-aluno.php',
            data: `id_aluno=${$(this).attr('id')}`,
            dataType: 'json',
            type: 'POST'
        }).done((retorno) => {
            $(".conteudo").load('src/alunos/view/list-alunos.html')
        })
    })
})

And the list-aluno.js listing, I do not know if it will be necessary to consult this script:

$(document).ready(() => {
    $(document).empty()
    $.ajax({
        url: 'src/alunos/model/list-alunos',
        dataType: 'json'
    }).done((retorno) => {
        for (const dado of retorno) {
            $("#alunos").append(
                `
                 <tr role="row">
                    <td>${dado.id_aluno}</td>
                    <td>${dado.nome}</td>
                    <td>${dado.rm}</td>
                    <td>${dado.celular}</td>
                    <td>
                        <button class="btn-delete-aluno" id="${dado.id_aluno}">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </td>
                 </tr>
                `
            )
        }
    })
})

Answer 1

Hello, it seems that you are not cleaning the table before reloading the data.

Try to create a TBODY after the THEAD and give the .append() on it (after cleaning it):

 <!-- tabela -->
 ...
 </thead>
 <tbody id="lista-alunos"></tbody>

And to clean, use the Empty()

   ...
        dataType: 'json'
    }).done((retorno) => {
        $("#lista-alunos").empty() //limpar todas as linhas que estavam na tabela
        for (const dado of retorno) {
            $("#lista-alunos").append( //acrescentar novas que vieram do servidor
   ...