Issue with deleting item

[jigapate]

Hello,

I am using custom calculations on each addition of form, say multiplying one input with another, and then making a total of multiplication results.

Problem is when we click on delete, it just hides the row but don't delete values of the item, When we delete one more item, then it will delete the first item which was hidden and my calculation is get updated.

I check the number of class on delete of item, it does not reduce on first delete, it always reduce on second detete,

How to completely delete the row with its values?

var _CalTotal = function () {
console.log($(".billitem_quantity").length );
//Calculate total of quantity
var total_quantity = 0;
$(".billitem_quantity").each(function(){
    total_quantity += parseFloat($(this).val()); 
});
$('#itemquantity_total').val(total_quantity.toFixed(2));

**//Calculate total of amount**
var total_amount = 0;
$(".billitem_total").each(function(){
    total_amount += parseFloat($(this).val());
});
$('#bill_total').val(total_amount.toFixed(2));
console.log('test');
}

Below is code for hide,

hide: function(deleteElement) {      
Swal.fire({
    title: "Are you sure to cancel this order?",
    text: "You will not able to revert this",
    icon: "question",
    showCancelButton: true,
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, revert it!",
    reverseButtons: true,
    }).then(function(result) {
    if (result.value) {

        $(this).slideUp(deleteElement);
        _CalTotal();  //Here i am calling calltotal function.

    } else if (result.dismiss === "cancel") {

    }
});                                                  
},