Delete table>tr with Ajax and PHP

Question

Fala galera, I have a question here.. I want to be able to delete a row from the table with Ajax just by clicking on a button without having to load the screen.. I already searched and tried to do more did not work.. I have the following html code:

<tr>
    <td><?= $client['name']; ?></td>
    <td><?= $client['email']; ?></td>
    <td><?= $client['tell']; ?></
    <td class="text-center"><button id="delete" class="glyphicon glyphicon-remove"></button></td>
</tr>

and java script:

$("#delete").click(function(){
    var id = $(this).attr("id");
    var request = $.ajax({
        type: "POST",
        data: "id="+id,
        url: "/removeClient",
        dataType: "json"
    });

    return false;
});

the php part I solve.. I just want to receive a $_POST['id'] and move on to the method that will delete the record. I thank you!

Answer 1

I managed to settle here as follows..

$(function() {
    $(".delete").click(function(){
    var element = $(this);
    var id = element.attr("id");
    var info = 'id=' + id;

    if(confirm("Deseja realmente Deletar cliente id:   " + id)) {
        $.ajax({
            type: "POST",
            url: "/removeClient",
            data: info,
            success: function () {
            }
        });

        $(this).parents("#show").animate({backgroundColor: "#003"}, "slow").animate({opacity: "hide"}, "slow");
    }

    });
});

is working and deletes Row after confirm returns true, but would like to know how I can customize this confirm, or use some modal.

Answer 2

First put an id in your tr, and change the id delete to class, and put a date attribute with the id on the button

   <tr class="tr_<?= $client['id']; ?>">
        <td><?= $client['name']; ?></td>
        <td><?= $client['email']; ?></td>
        <td><?= $client['tell']; ?></
        <td class="text-center"><button data-id="<?= $client['id']; ?>" id="delete" class="delete glyphicon glyphicon-remove"></button></td>
    </tr>

Ai make the request, and make php return 1 to deleted, and 0 to error.

$(document).on('click', '.delete', function () {
    var id = $(this).data('id');
    $.ajax({
        type: "POST",
        url: "pagina.php",
        data: {id: id},
        dataType: 'json',
        success: function (data)
        {
            var retorno = data;

            if(retorno === 1){
               $('.tr_'+id).empty().hide();
            }else{
               alert('erro no php');
            }
        }
    });
});

I didn’t test the code, but I think if I’m wrong, it’s pretty close.

Answer 3

In the answer of AP .... however I would like to know how I can customize this confirm, or use some modal.

1. The Libraries

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   

2. SCRIPS

   //função disparada ao clicar no botão relativo a linha
   $(function() {
       $(".delete").click(function(){
           var element = $(this);
           id = element.attr("data-id");
               if(id){
                   //conteudo do paragrafo <p id="resultado"></p> dentro do modal
                   $("#resultado").html("Tem certeza que quer excluir o id "+id);
   
                   //abre o modal com a pergunta acima
                   $("#myModal").modal('show');
                }
       });
   });
   
   //função disparada ao clicar no botão deletar do modal
   function checkDeletar() {
       jQuery.ajax({
       url: "/removeClient"",
       data: 'id=' + id,
       type: "POST",
       success:function(data){
   
           /* oculta a linha */
           $('.tr_'+data).hide();
   
           //oculta o modal
           $("#myModal").modal('hide');
   
       },
       error:function (){
           alert('erro');
       }
       });
   }
   

3. HTML

      <!-- Se esquecer de colocar a tag table o código não vai funcionar -->
      <table ....>
          <tr class="tr_<?= $client['id']; ?>">
               <td><?= $client['name']; ?></td>
               <td><?= $client['email']; ?></td>
               <td><?= $client['tell']; ?></td>
               <td class="text-center"><button data-id="<?= $client['id']; ?>" id="delete" class="delete glyphicon glyphicon-remove"></button></td>
           </tr>
       </table>
   
   
       <!-- Modal -->
       <div id="myModal" class="modal fade">
           <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>X</span></button>
                    </div>
                    <div class="modal-body">
   
                           <p id="resultado"></p>
   
                         <button type="button" class="btn btn-primary btn-sm" onClick="checkDeletar()">Deletar</button>   
   
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
       </div>
       <!-- Modal -->