Refresh in table in ajax function Success

Question

I have the following table where I have two buttons to make delete and update. When I do delete automatically removes the table row. But when I edit the line and change status the user continues to see the line, where he gets confused because he doesn’t know which lines have already been edited and which ones are missing. So when changing state the line should also disappear from the table.

Code:

<div id="spoiler2" class="esconde">
<table class="table table-responsive" id="employee_table2"> 
<h1 style="font-size: 30px"><strong>Pedidos de Manutenção</strong></h1>
<thead>  
<tr> 
<th>Data</th>
<th>Valência</th>
<th>Descrição</th>
<th>Colaborador</th>        
<th>Estado</th> 
<th>Ação</th>   
<th>Eliminar</th>                           
</tr> 
</thead>
<tbody>
<?php  do{ ?>
<tr  id="<?php echo $produto2["Id"]; ?>">
<td><?php echo $produto2["DataRegisto"]; ?></td> 
<td><?php echo $produto2["Destino"]; ?></td> 
<td><?php echo $produto2["Descricao"]; ?></td> 
<td><?php echo $produto2["nome"]; ?></td>
<td><?php echo $produto2["Estado"]; ?></td>
<td><button type="button" name="edit" data-id="<?php echo $produto2["Id"]; ?>" id="open_<?php echo $produto2["Id"]; ?>" data-target="#add_data_Modal2" class="btn btn-warning btn-sm edit_data2" ><span class="glyphicon glyphicon-pencil"></span></button></td>
<td><button class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>  
<?php } while($produto2 = $result2->fetch_assoc()); ?>
</tbody>      
</table>   
</div>

js:

$(document).on('click', '.edit_data2', function(){  
           var employee_id2 = $(this).data('id');          
           $.ajax({  
                url:"./editarmanutencao",  
                method:"POST",
                cache: false,               
                data:{employee_id2:employee_id2},               
                dataType:"json",  
                success:function(data){

                    console.log(data);
                     $('#Id2').val(data.Id);
                     $('#Tratamento').val(data.Tratamento);
                     $('#Estado2').val(data.Estado);
                     $('#Prestador').val(data.Prestador);
                     $('#employee_id2').val(data.Id);                    
                     $('#insert2').val("Gravar");  
                     $("#add_data_Modal2").modal("show");                    
                }  
           });

      });  

function inserir_registo2()
{  

    var dadosajax = {
        'Id' : $("#Id2").val(),
        'DataTermino' : $("#DataTermino").val(),
        'Tratamento' : $("#Tratamento").val(),
        'Estado' : $("#Estado2").val(),
        'Prestador' : $("#Prestador").val()
    };
    $.ajax({
        url: './resolucaomanutencao',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){
          $(".error_message").removeClass('hide');
        },
        success: function(result)
        { 
        $("#add_data_Modal2").modal("hide");
         }  
    });
}

How can I remove the table row when changing the state in ajax Success?

Answer 1

I resolved as follows, to remove the line in case of success:

I added this line before ajax:

let rowToBeRemoved =  $("#"+$("#Id2").val());

and inside the ajax I put:

rowToBeRemoved.remove();

Complete code:

function inserir_registo2()
{  
    let rowToBeRemoved =  $("#"+$("#Id2").val());
    var dadosajax = {
        'Id' : $("#Id2").val(),
        'DataTermino' : $("#DataTermino").val(),
        'Tratamento' : $("#Tratamento").val(),
        'Estado' : $("#Estado2").val(),
        'Prestador' : $("#Prestador").val()
    };
    $.ajax({
        url: './resolucaomanutencao',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){
          $(".error_message").removeClass('hide');
        },
        success: function(result)
        { 
        $("#add_data_Modal2").modal("hide");
        rowToBeRemoved.remove();

      }  
    });
}