Calling function after fadeOut

Question

I have a function that removes the row from a table, after removal I need it to be called to function getTotal();. But in any way that I put it does not work, because of the effect of the line, I need to wait for the effect to pass, and call the function. I’m actually doing it this way, but it’s not working:

function ExcluirProdutoPedido(linha) {
    if ($thatRow == null) {
        alert('Selecione uma linha para fazer a exclusão.');
    }
    else {
        $thatRow.closest("tr").fadeOut(500, function () {
            $thatRow.remove();
        })
        getTotal();
    }
}

How to proceed? EDIT

Function getTotal();

function getTotal() {
    debugger;
    let result = 0;
    let columns = $("#tablepesquisaprodutos tr td:nth-child(" + 8 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#ValorTotalPedido").val(result.toFixed(6).replace(".", ","));
    result = 0;
    columns = $("#tablepesquisaprodutos tr td:nth-child(" + 11 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#TICMS").val(result.toFixed(2).replace(".", ","));
    result = 0;
    columns = $("#tablepesquisaprodutos tr td:nth-child(" + 13 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#TISS").val(result.toFixed(2).replace(".", ","));
    result = 0;
    columns = $("#tablepesquisaprodutos tr td:nth-child(" + 15 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    $("#TIPI").val(result.toFixed(2).replace(".", ","));
    var IPI = document.getElementById("TIPI").value;
    var TotalPedido = document.getElementById("ValorTotalPedido").value;
    var vIPI = 0;
    var vTotalpedido = 0;
    var vTotalProduto = 0;
    vIPI = Number(IPI.replace(/[R\$ \.]/g, '').replace(',', '.'));
    TotalPedido = Number(TotalPedido.replace(/[R\$ \.]/g, '').replace(',', '.'));
    vTotalProduto = TotalPedido - vIPI;
    document.getElementById("ValorProdutos").value = (parseFloat(vTotalProduto).toFixed(6).replace(".", ","));
    DescontoGlobal1();
}

Answer 1

The problem is you’re using .remove() the element that called the function, i.e., $thatRow. See that the fadeOut() is applied to the ancestor tr using closest("tr"), and when removing, no.

Switch the dial to:

$(this).remove();

The $(this) points to the element that called the fadeOut, namely, the tr in $thatRow.closest("tr").

And call the function getTotal() inside the callback of the fadeOut():

$thatRow.closest("tr").fadeOut(500, function () {
    $(this).remove();
    getTotal();
})

Hypothetical example:

function ExcluirProdutoPedido(linha) {
    if (linha == null) {
        alert('Selecione uma linha para fazer a exclusão.');
    }
    else {
        $(linha).closest("tr").fadeOut(500, function () {
            $(this).remove();
            getTotal();
        })
    }
}

function getTotal(){
   let columns = $("#tablepesquisaprodutos tr td:nth-child(1)");
   let result = 0;
   columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });
    console.log(result);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1" id="tablepesquisaprodutos">
   <tr>
      <td>
         3
      </td>
      <td>
         <button onclick="ExcluirProdutoPedido(this)">Excluir</button>
      </td>
   </tr>
   <tr>
      <td>
         3
      </td>
      <td>
         <button onclick="ExcluirProdutoPedido(this)">Excluir</button>
      </td>
   </tr>
   <tr>
      <td>
         3
      </td>
      <td>
         <button onclick="ExcluirProdutoPedido(this)">Excluir</button>
      </td>
   </tr>
</table>

Answer 2

You can put getTotal() right after remove(). If there is any problem it may be because we did not have time to update the DOM after deleting the line, then a small timeout must solve:

$thatRow.closest("tr").fadeOut(500, function () {
            $thatRow.remove();
            setTimeout(
            function()  {
                getTotal();
             }, 100);
        })

Of course you could use the same code with the setTimeout where the call to getTotal is currently, just adding a little longer than the fadeOut effect, 600 for example:

 $thatRow.closest("tr").fadeOut(500, function () {
        $thatRow.remove();
    })

    setTimeout(
    function()  {
       getTotal();
    }, 600);

But I don’t think this is the best way, the first I think is the best option.