Subtract after removing a row from the Javascript table

Question

I have a certain bug here. I have a function that calculate the quantity x unit price to give the total value and with that do the sub total. Like an e-commerce cart.

$('.total').prop('readonly', true);
$('.vlun').mask("000.000.000.000.000.00", {
    reverse: true
});

function somarPrecos() {
    $('.vltot').prop('readonly', true);
    var $tblrows = $("#pecasList tbody tr");
    $tblrows.each(function(index) {
        var $tblrow = $(this);
        $tblrow.find('.qtd, .vlun').on('change', function() {
            var qtd = $tblrow.find(".qtd").val();
            var unt = $tblrow.find(".vlun").val();
            var subTotal = parseInt(qtd, 10) * parseFloat(unt);
            if (!isNaN(subTotal)) {
                $tblrow.find('.vltot').val(subTotal);
                var grandTotal = 0;
                $(".vltot").each(function() {
                    var stval = parseFloat($(this).val());
                    grandTotal += isNaN(stval) ? 0 : stval;
                });
                $('.total').val(grandTotal);
            }
        });
    });
};

in this table I can add and remove products. I wanted when I removed the row from this product it subtracted the total value from the table sub-total. I did a function for this and it worked half part because it only subtracts 1 time.

$("#pecasList").on('click', '.remover-peca', function() {
    var removesub = $('.total').val();
    var removetot = $('.vltot').val();
    $(this).each(function() {
        $(this).parents("tr").remove();
        var grandsubTotal = removesub - removetot
        $('.total').val(grandsubTotal);
    });
});

Can someone give me a light? html below:

 <div class="row">
    <div class="col-md-12">
        <label>
            Peça:
        </label>
        <div style="float:right;margin-bottom:10px;">
            <button type="button" class="btn btn-warning add-novo"><i class="fa fa-plus"></i> Adicionar peça</button>
        </div>
    </div>
</div>
<table id="pecasList" class="table table-bordered">
    <thead>
        <tr>
            <th class="col-md-1">Qtd</th>
            <th class="col-md-6">Descrição</th>
            <th class="col-md-2">Valor Unitário</th>
            <th class="col-md-2">Valor Total</th>
            <th class="col-md-1">Remover</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <label>Sub-Total:</label>
                <input type="text" class="form-control required total">
            </td>
            <td></td>
        </tr>
    </tfoot>
</table>

Function to add table rows:

$(".add-novo").click(function(){
    var linha = '<tr><td><input type="number" class="col-md-12 form-control required qtd" name="pedidoAssistencia.qtd"></td><td><input type="text" class="col-md-12 form-control required nomeproduto" name="pedidoAssistencia.nmpeca"></td><td><input type="text" class="col-md-12  form-control required vlun" name="pedidoAssistencia.vlunit"></td><td><input type="text" class="col-md-12 required form-control vltot" name="pedidoAssistencia.vltotl"></td><td><button type="button" class="btn btn-warning remover-peca btn-block"><i class="fa fa-trash"></i></button></td></tr>'
    $("table tbody").append(linha);
    somarPrecos();
});

Answer 1

I suggest you erase the line and then recalculate the total of the remaining lines:

$("#pecasList")
  .on('input', 'input', somarPrecos)
  .on('click', '.remover-peca', function() {
    // apaga a linha clicada
    $(this).closest("tr").remove();
    somarPrecos();
  });


function somarPrecos() {
  // calcula de novo o total
  var subTotal = 0;
  $("#pecasList tbody tr").each(function() {
    var qtd = Number($(this).find('.qtd').val());
    var vUnit = Number($(this).find('.vlun').val());
    var total = qtd * vUnit;
    $(this).find('.vltot').val(total);
    subTotal += total;
  });
  $('.total').val(subTotal);
}

$(".add-novo").click(function() {
  var linha = '<tr><td><input type="number" class="col-md-12 form-control required qtd" name="pedidoAssistencia.qtd"></td><td><input type="text" readonly class="col-md-12 form-control required nomeproduto" name="pedidoAssistencia.nmpeca"></td><td><input type="text" readonly class="col-md-12  form-control required vlun" name="pedidoAssistencia.vlunit" value="30"></td><td><input type="text" readonly class="col-md-12 required form-control vltot" name="pedidoAssistencia.vltotl"></td><td><button type="button" class="btn btn-warning remover-peca btn-block"><i class="fa fa-trash"></i></button></td></tr>'
  $("table tbody").append(linha);
  somarPrecos();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <label>
                            Peça:
                        </label>
    <div style="float:right;margin-bottom:10px;">
      <button type="button" class="btn btn-warning add-novo"><i class="fa fa-plus"></i> Adicionar peça</button>
    </div>
  </div>
</div>
<table id="pecasList" class="table table-bordered">
  <thead>
    <tr>
      <th class="col-md-1">Qtd</th>
      <th class="col-md-6">Descrição</th>
      <th class="col-md-2">Valor Unitário</th>
      <th class="col-md-2">Valor Total</th>
      <th class="col-md-1">Remover</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <label>Sub-Total:</label>
        <input type="text" class="form-control required total">
      </td>
      <td></td>
    </tr>
  </tfoot>
</table>