Remove input field update

Question

When I click the checkbox to remove a table row, I want my calculations to update the Totals. I've done this in similar situations by simply adding the calculate sum function to the remove row event, but I can't seem to get it to work in this situation.

$(function () {
    // Append Invoice Line
    $(document).on('click', '#addnewitem', function () {
        var currentTable = $(this).closest('table').attr('id');
        $('#' + currentTable).append('<tr><td><div class="col-sm-6 col-lg-12"><input    type="Client Name" class="form-control" id="c_name" placeholder="Item"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control" id="c_name" placeholder="Description"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control price" id="item_price" placeholder="Item Price"  name="item_price[]"></div></td><td><button type="button" id="removeItem" class="btn btn- default"><span class="glyphicon glyphicon-trash"></span></td></tr>');
    });

    //Remove Invoice Line
    $(document).on('click', '#removeItem', function () {
        calculateTotal();
    });

    // Sum Amt Collected    
    function calculateSum () {
        var sum = 0;
        var currentTable = $(this).closest('table').attr('id');
        $('#' + currentTable + ' input#item_price').each(function () {
            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });
    //.toFixed() method will roundoff the final sum to 2 decimal places
        $('#' + currentTable + ' input.sumamtcollected').val(sum.toFixed(2));
    }

    $(document).on('keyup', 'input#item_price', calculateSum);
});

http://jsfiddle.net/swTs6/

Answer 1

I don't know if this is the issue, but in the code you have posted, you don't call the calculateSum function when #removeitem is clicked. You are calling calculateTotal, which is a non-existant function.

Your function should look something like this:

$(document).on('click', '#removeitem', function() {
    calculateSum();
});

As a side note, you should limit the number of functions bound directly to the document object. #removeitem is an id, so there should only be 1 item with that ID. You should change your code to look like below, or that click event will be fired every time you click something on the page:

$('#removeitem').on('click', calculateSum);

If #removeitem is supposed to appear more than once on your page, I would suggest changing to a class rather than an ID. An ID is only supposed to appear on the page once. Classes can appear multiple times. To use delegated events on classes, you could bind to the closest non changing parent element.

$('#parent').on('click', '.removeitem', calculateSum);

Answer 2

$(document).on('click', '#removeItem', function () {
    calculateSum();
});

You need to call CalculateSum on #removeItem click instead of CalculateTotal (which does not exist). I have tested this code and it works perfectly.

Update:

Besides the above issue, the actual code was removing the table row first and then using $(this).closest('table').attr('id') to find the table ID, which was returning undefined.

I have fixed this in JsFiddle, updated one can be accessed here.