how to perform substraction in Html Table using JQuery

Net MVC and i am facing a issue in this . Please help me in this. I am creating a project in which i am just adding a product and show the total bill amount in the below of the table. I am able to do that but when i am removing the item from the table i want my total bill amount will also change but that this not happening in this.

For example:- ProductName       Quantity    Price   Amount
              Fountain Pen       6           6       36         Remove
              Pencil             5           5       25         Remove
          
          TotalBill: 71 TotalQuantity: 11

          

Now if i remove Pencil from the list my TotalBill will be 36 but it shows 71.

Please help me in this. I really appreciate for this.

<div class="modal-header">
    <h5 class="modal-title" id="modal-title">Create Purchase Order</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

<div class="modal-body">
    <h5 style="color:blueviolet">Purchase Order Details</h5>
    <button type="button" class="btn btn-sm btn-success pull-right" style="margin-top:-31px;">Mark To Seller</button>
    <hr />
    @Html.HiddenFor(x => x.PurchaseID)
    @Html.HiddenFor(x => x.LoginID)
    @Html.HiddenFor(x => x.SupplierID)

    <div class="container">
        <div class="col">
            <div class="row-md-6">
                <div id="ui">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                @Html.LabelFor(x => x.SupplierName)
                                @Html.DropDownListFor(x => x.Supplier_ID, new SelectList(ViewBag.data, "Supplier_ID", "Supplier_Name"), "--Select Supplier Name--", new { @class = "form-control", @required = true })
                                @Html.ValidationMessageFor(x => x.SupplierName, "", new { @class = "text-danger" })
                            </div>

                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Currency)
                                @Html.DropDownList("Currency", (IEnumerable<SelectListItem>)ViewBag.MeasureList, "--Select Currency Type--", new { id = "Currency", @class = "form-control", @required = true })
                                @Html.ValidationMessageFor(x => x.Currency, "", new { @class = "text-danger" })
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Date_Of_Purchase)
                                @Html.TextBoxFor(x => x.Date_Of_Purchase, "{0:dd-MM-yyyy}", new { id = "datepicker", @class = "form-control", autocomplete = "off", @required = true })
                                @Html.ValidationMessageFor(x => x.Date_Of_Purchase, "", new { @class = "text-danger" })
                            </div>

                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Due_Date)
                                @Html.TextBoxFor(x => x.Due_Date, "{0:dd-MM-yyyy}", new { id = "datepicker1", @class = "form-control", autocomplete = "off", @required = true })
                                @Html.ValidationMessageFor(x => x.Due_Date, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h5 style="color:blueviolet"> Order Details</h5>
    <hr />

    <div class="container">
        <div class="col">
            <div class="row-md-6">
                <div id="ui">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                @Html.LabelFor(x => x.ProductName)
                                @Html.DropDownListFor(x => x.Stock_ID, new SelectList(ViewBag.stock, "Stock_ID", "Stock_Name"), "--Select Product Name--", new { id = "StockID", @class = "form-control" })
                            </div>

                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Quantity)
                                @Html.TextBoxFor(x => x.Quantity, new { id = "Quantity", @class = "form-control" })
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Price)
                                @Html.TextBoxFor(x => x.Price, new { id = "Price", @class = "form-control" })
                            </div>

                        </div>
                        <div class="col-md-12">
                            <a id="addToList" class="btn btn-primary" style="margin-top:-38px; float:right; color:white; font-weight:400;">Add To List</a>
                        </div>

                    </div>

                    <table id="detailsTable" class="table">
                        <thead>
                            <tr>
                                <th style="width:20%">Product Name</th>
                                <th style="width:16%">Quantity</th>
                                <th style="width:16%">Price</th>
                                <th style="width:16%">Amount</th>
                                <th style="width:20%"></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <strong>TotalBill:</strong>
                    @Html.TextBoxFor(x => x.TotalAmount, new { @Value = 0, id = "totalamount", @class = "form-control", @readonly = "readonly" })
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" id="saveOrder" onclick="CreateOrUpdate()" class="btn btn-sm btn-success pull-right">Save</button>
    </div>

</div>

<script>   
$("#addToList").click(function (e) {
    debugger;
    e.preventDefault();

    var productName = $("#StockID option:selected").text();
    var pid = $("#StockID option:selected").val();
    let price = $("#Price").val();
    let quantity = $("#Quantity").val();
    let detailsTableBody = $("#detailsTable tbody");

    var productItem = `<tr>
                            <td pid=${pid}>

                                ${productName}
                            </td>
                            <td>${quantity}</td>
                            <td>${price}</td>
                            <td>${(parseFloat(price) * parseInt(quantity))}</td>
                            <td><a data-itemId="0" href="#" class="deleteItem">Remove</a></td>
                        </tr>`;

    detailsTableBody.append(productItem);
    Bill();

    clearItem();
});



function Bill() {
    debugger;
    let price = $("#Price").val();
    let quantity = $("#Quantity").val();
    $('#totalamount').val(parseFloat($('#totalamount').val()) + (parseFloat(price) * parseInt(quantity)));
}

//After Add A New Order In The List, Clear Clean The Form For Add More Order.
function clearItem() {
    $("#StockID").val('');
    $("#Price").val('');
    $("#Quantity").val('');
}
// After Add A New Order In The List, If You Want, You Can Remove It.
$(document).on('click', 'a.deleteItem', function (e) {
    debugger;
    e.preventDefault();
    var $self = $(this);
    var total = 0;
    if ($(this).attr('data-itemId') == "0") {
        $(this).parents('tr').css("background-color", "#ff6347").fadeOut(800, function () {
            $(this).remove();
        });
    }
    $('.deleteItem').each(function () { total = total + parseInt($(this).val().trim()); });
    $('#totalamount').val(total);
});

Please Help me how to get Total Quantity also.

Answer

According to your code, deleteItem is an anchor therefor it has no value or val but you are looking for it in the deleteItem loop.

My recommendation is to have a single function lets call it calc_total, and just call that function in the bottom of both the delete and add functions. And give your anchor a data attribute with the line total (qty * price).

This will give you a single consistent function for calculating the total.

<a data-line_total="${(parseFloat(price) * parseInt(quantity))}" data-itemId="0" href="#" class="deleteItem">

function calc_total(){
    var total = 0;
    $('.deleteItem').each(function () { total = total + parseInt($(this).data("line_total")); });
    $('#totalamount').val(total);
}