DELETE specific row from a table with PHP and AJAX

Question

Hello! I have the following problem: A contact schedule that, one of the existing options is to DELETE a contact. It displays a TABLE with contacts, by clicking 'search'. In each row of the table there is a "Delete" button. However, when I click on this button, only the first row of the table is deleted and not the row I chose to delete. Follow the example below:

Code in php to search for a contact:

if (isset($_GET["txtnome"])) 
{
    $nome = $_GET["txtnome"];


    // Conexao com o banco de dados
    $host = "127.0.0.1";
    $port = "5432";
    $db = "agenda";
    $user = "postgres";
    $pass = "postgres";

    $conexao = new PDO("pgsql:host=$host;dbname=$db;user=$user;password=$pass") or die("Erro na conexão!");


    // Verifica se a variável está vazia
    if (empty($nome)) {
        $sql = "SELECT * FROM contato";
    } else {
        $nome .= "%";
        $sql = "SELECT * FROM contato WHERE nome like '$nome'";
    }
    sleep(1);
    $result = $conexao->query($sql) or die("Erro na consulta!");
    $contact = $result->fetchAll();

    // Verifica se a consulta retornou linhas 
    if (!empty($contact)) {
        // Atribui o código HTML para montar uma tabela
        $tabela = 
        "
        <div class='row'>
        <div class='col-md-6'>

        <table border='1' class='table table-bordered table-hover table-striped'>
                    <thead class='bg-info'>
                        <tr>
                            <th>NOME</th>
                            <th>TELEFONE</th>
                            <th>CELULAR</th>
                            <th>EMAIL</th>
                            <th>ID</th>
                            <th>OPÇÃO</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr id='hidden'>";
        $return = "$tabela";

        // Captura os dados da consulta e insere na tabela HTML

        foreach ($contact as $row) {
            $return.= "<td>" . utf8_encode($row["nome"]) . "</td>";
            $return.= "<td>" . utf8_encode($row["telefone"]) . "</td>";
            $return.= "<td>" . utf8_encode($row["celular"]) . "</td>";
            $return.= "<td>" . utf8_encode($row["email"]) . "</td>";
            $return.= "<td id='deletar'>" . utf8_encode($row["id"]) . "</td>";
            $return.= "<td>" . "<input type='button' class='btn btn-danger btn-sm' value='Excluir' onclick='excluir();'/>" . "</td>";
            $return.= "</tr>";
        }
        echo $return.="</tbody></table></div></div>";
    } else {
        // Se a consulta não retornar nenhum valor, exibe mensagem para o usuário
        echo "Não foram encontrados registros!";
    }
}

Function JavaScript to delete the table row:

function excluir(){

    swal({
      title: 'Tem certeza que deseja excluir este contato?',
      text: "Você não poderá reverter isso!",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sim, exclua!'
    }).then((result) => {
      if (result.value) {

        var elemento = document.getElementById("deletar").innerHTML;
        document.getElementById("deletar").value = elemento;

        var id = document.getElementById("deletar").value;
        var resultado = document.getElementById("result");

        var xmlreq = CriaRequest();

        xmlreq.open("GET", "contato.php?deletar=" + id, true);

        // Atribui uma função para ser executada sempre que houver uma mudança de ado
        xmlreq.onreadystatechange = function(){

        // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
        if (xmlreq.readyState == 4) {
            // Verifica se o arquivo foi encontrado com sucesso
            if (xmlreq.status == 200) {
                resultado.innerHTML = xmlreq.responseText;
                document.getElementById("hidden").style.display = "none";
                swal(
                  'Deleted!',
                  'Your file has been deleted.',
                  'success'
                )

            }else{
                resultado.innerHTML = "Erro: " + xmlreq.statusText;
            }
        }
    };
    xmlreq.send(null);
      } //if do result.value
    }) //swal principal
} //funcao excluir

Code in php to delete the DB contact:

if (isset($_GET["deletar"])) {

    $id = $_GET["deletar"];

    // Conexao com o banco de dados
     $host = "127.0.0.1";
     $port = "5432";
     $db = "agenda";
     $user = "postgres";
     $pass = "postgres";

     $conexao = new PDO("pgsql:host=$host;dbname=$db;user=$user;password=$pass") or die("Erro na conexão!");

     $result = $conexao->prepare("DELETE FROM contato WHERE id = :deletar");
     $result->bindValue(':deletar', $id);

     sleep(1);

     if (!($result->execute())) {
         echo "Erro ao excluir contato :(";
     }
}

Answer 1

However, when I click on this button, only the first row of the table is deleted and not the row I chose to delete.

Your page is having several elements with the same id. As such, its function excluir() will get the id of the first element found.

1) Correct the part "passing" the id to be deleted. Note the comments.

foreach ($contact as $row) {

    // ...

    // Por estar dentro de um foreach, vários elementos receberão o mesmo id "deletar"...
    // $return.= "<td id='deletar'>" . utf8_encode($row["id"]) . "</td>";
    $return.= "<td>" . utf8_encode($row["id"]) . "</td>";
    // Então, vamos passar o ID como parâmetro para a função excluir()! Veja:
    $return.= "<td>" . "<input type='button' class='btn btn-danger btn-sm' value='Excluir' onclick='excluir(".utf8_encode($row["id"]).");'/>" . "</td>";
    $return.= "</tr>";
}

2) Correct the function excluir():

function excluir(id){ // Agora vai recebe o ID como parâmetro

    // ...

        // Comentar aqui pra não sobrescrever a variável id:
        //var id = document.getElementById("deletar").value;

    // ...

}

Now it should work... Note that the rest of the code remains the same. I only posted the part that matters to fix...