如何在删除字段时计算输入字段值并将其分配给另一个字段

Question

I am trying to calculate the total amount of a group of repetitive fields.

This is my markup

<label for="name" class="p-label-required">Amount <span style="color: red"> (Numbers only)</span></label>
<input type="text" id="amount" name="amount[]" placeholder="Amount" required="required" class="form-control inputChangeVal reqF" data-js-input-type="number" /><br/>

<div class="add_another_st"></div>
<button class="btn add_another_st_btn" style="margin-bottom: 25px;">+</button>
<hr style="margin-top: 0;">
Total Amount:
<input type="text" class="totalAmount" id="updatedTotalAmount" style="font-size: 20px; font-weight: bold; margin-bottom: 25px; border: 0;" readonly />

and this is my jQuery to calculate the total whenever something happens on the amount fields.. it calculates the total correctly and assign it to the total amount field.

/* calculating and updating the total amount */
    function updateTotal() {
        var price = 0;

        jQuery(".inputChangeVal").each(function() {
            var t = parseFloat(jQuery(this).val(), 10);
            price = price + t;
        });

        var total = price.toFixed(2);
        jQuery(".totalAmount").val(total);
        console.log('updateTotal Runs');
    }
    jQuery(document).on("change, keyup", ".inputChangeVal", updateTotal);

but I want to calculate the amount again when an amount field is removed and it does not work / update the total whenever and amount field is removed.

the code I've created for this is here in js fiddle

How can I update the total again while a field is removed?

Answer 1

You need to call the updateTotal() function upon sliding up of the wrapper element.

jQuery(this).parent('div').slideUp(1000, function() {
    jQuery(this).remove();
    x--;
    updateTotal(); // updating total
});

Working fiddle

Answer 2

jQuery(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        debugger;
        e.preventDefault();
        jQuery(this).parent('div').slideUp(1000, function() {
                jQuery(this).remove();

                x--;
        /*running again calculation 0f the total amount and while removing an amount */
        var price = 0;
        jQuery(".inputChangeVal").each(function() {
                var t = parseFloat(jQuery(this).val(), 10);
                price = price + t;
        });
        var total = price.toFixed(2);
        jQuery(".totalAmount").val(total);
        console.log('updateTotal Runs while removing');
         });
});