Remove row from table after deleting via AJAX

Asked

Viewed 833 times

0

I have a table that shows student records, and each row has a button to delete the student, and the deletion is done via AJAX. I would like to fadeOut the line that is deleted, so in AJAX Success I did the following:

success:function(){
                swal("Excluído!", "O aluno foi removido com sucesso.", "success");
                btnExcluir.closest('tr').fadeOut();
            }

The problem is that all lines are being removed. I also tried with Parent(). Parent() but still the same occurs.

Follow the excerpt from my table:

<tr>
    <td>{{$aluno['NM_NIS_ALU']}}</td>
    <td>{{$aluno['ST_NOME_ALU']}}</td>
    <td class="text-right">{{$aluno['IDADE']}}</td>
    <td class="text-center">
        <a class="btn btn-primary btn-xs acao" data-toggle="modal" data-target="#modalAluno{{$aluno['ID_ALUNO_ALU']}}"><i class="fa fa-edit"></i> Editar</a>
        <a class="btn btn-danger btn-xs acao delete-aluno" data-token="{{csrf_token()}}" data-id="{{$aluno['ID_ALUNO_ALU']}}"><i class="fa fa-times"></i> Excluir</a>
    </td>
</tr>

If anyone can help me, why is this occurring?

php javascript jquery ajax front-end

1 answer

1


Grab the element tr before making the ajax request and after a fadeOut.

You’re taking all the elements that have the class delete-aluno and taking their respective trs, this way will return 3 trs (in the example below) and not just a.

You have to take the element tr concerning the delete-aluno that you are doing the onclick action.

Follow a functional example.

index php.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        $(function() {
            $(".delete-aluno").click(function() {
                var $tr = $(this).closest("tr");

                $.ajax({
                    type: 'post',
                    url: 'retornoAjax.php',
                    data: {

                    },
                    dataType: 'json',
                    success: function(retorno){
                        if (retorno.success) {
                            $tr.fadeOut();
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>Diego</td>
            <td class="text-center">
                <a class="btn btn-primary btn-xs acao"><i class="fa fa-edit"></i> Editar</a>
                <a class="btn btn-danger btn-xs acao delete-aluno"><i class="fa fa-times"></i> Excluir</a>
            </td>
        </tr>
        <tr>
            <td>Diego 2</td>
            <td class="text-center">
                <a class="btn btn-primary btn-xs acao"><i class="fa fa-edit"></i> Editar</a>
                <a class="btn btn-danger btn-xs acao delete-aluno"><i class="fa fa-times"></i> Excluir</a>
            </td>
        </tr>
        <tr>
            <td>Diego 3</td>
            <td class="text-center">
                <a class="btn btn-primary btn-xs acao"><i class="fa fa-edit"></i> Editar</a>
                <a class="btn btn-danger btn-xs acao delete-aluno"><i class="fa fa-times"></i> Excluir</a>
            </td>
        </tr>
    </table>
</body>
</html>

returns Ajax.php

<?php
echo json_encode(array("success" => "true"));
  • 1

    It worked! Thank you very much, friend!

Browser other questions tagged php javascript jquery ajax front-end

You are not signed in. Login or sign up in order to post.