Как уменьшить общее количество при удалении столбца?

Question

Текущая ситуация

У меня есть динамическая таблица, я могу добавить / удалить столбец и работать над базовыми вычислениями в столбце цены, отображая общее накопление каждой строки.

Но если я удалю вторую / третью строку, общее число не изменится.

Ожидаемая ситуация

Когда я удаляю строку, общее число автоматически изменяется соответственно

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"
    integrity="sha256-/05Jde9AMAT4/o5ZAI23rUf1SxDYTHLrkOco0eyRV84=" crossorigin="anonymous">
</script>

<table class="table table-striped table-bordered">
    <thead align="center" class="table table-primary">
        <tr>
            <th width="10%">amount</th>
            <th width="10%">Price</th>
            <th><a href="#" class="addRow btn btn-primary btn-sm"><i class="fa fa-plus"></i></a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="number" name="amount[]" class="amount" min="1" max="1000000" required="">
            </td>
            <td>
                <input type="number" name="Price[]" class="Price" min="1" max="1000000000000" required="">
            </td>
            <td align="center">
                <a href="#" class="btn btn-danger remove btn-sm">
                    <i class="fa fa-times"></i>
                </a>
            </td>
            <td style="display:none;">
                <input type="number" name="total_price[]" class="total_price">
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total Price: </td>
            <td><b class="total"></b></td>
            <td style="border: none"></td>
        </tr>
    </tfoot>
</table>

Javascript

<script type="text/javascript">
    $('tbody').delegate('.amount,.Price','keyup',function(){
            var tr=$(this).parent().parent();
            var amount=tr.find('.amount').val();
            var Price=tr.find('.Price').val();
            var total_price=(amount*Price);
            tr.find('.total_price').val(total_price);
            total();
        });

        function total(){
            var total=0;
            $('.total_price').each(function(i,e){
                var total_price=$(this).val()-0;
            total +=total_price;
        });
            $('.total').html("Rp. "+total);  
        }

        $('.remove').live('click',function(){
             var last=$('tbody tr').length;
        if(last==1){
            alert("You cannot delete the last row.");
        }
        else{
             $(this).parent().parent().remove();
        }
        });

        $('.addRow').on('click',function(){
            addRow();
        });
</script>

Answer 1

Хорошо. У вас уже есть ответ на ваш вопрос ..
Сначала у вас есть метод вычисления итогов.

function total(){
       var total=0;
       $('.total_price').each(function(i,e){
            var total_price=$(this).val()-0;
            total +=total_price;
        });
        $('.total').html("Rp. "+total);  
}

Затем у вас также есть функция удаления
Так что просто позвонитеобщая функция после удаления строки.

$('.remove').live('click',function(){
        var last=$('tbody tr').length;
        if(last==1){
            alert("You cannot delete the last row.");
        }
        else{
             $(this).parent().parent().remove();
             //Here your row has been deleted.
             total();
        }
});

Answer 2

Попробуйте вызвать функцию total после удаления элемента

    $('.remove').live('click',function(){
         var last=$('tbody tr').length;
    if(last==1){
        alert("You cannot delete the last row.");
    }
    else{
         $(this).parent().parent().remove();
         // Call your function total here
    }
    });