Remove Table Rows Updating Total Data Using Jquery

I have a table where I can add multiple numbers and create an add more button also to add a new row on the table and calculate all total using jQuery. Now when I remove the new row

Solution 1:

TL;DR Simply calculate again.

Your calculate way is already good, just wrap it with a function, and then you can call it whenever you want to.

functionaddMore() {
  var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>');
        new_raw.insertBefore('#my_new_raw');
        $("#myTable").on('click', '.remove', function() {
            $(this).parent().parent().remove();
            calculate();
        });
}

functioncalculate() {
    var sum = 0;
    $('.addData').each(function(i) {
        if (!isNaN(this.value) && this.value.length != 0) {
            if ($(this).hasClass('addData')) {
                sum += parseFloat(this.value);
            }
        }
    });
    $('#my_total').val(sum.toFixed(2));
}


$(document).on('blur keyup', '.addData', function(e) {
    calculate();
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table"id="myTable"><tbody><tr><td>Value 1</td><td><inputtype="number"class="addData"></td></tr><tr><td>Value 2</td><td><inputtype="number"class="addData"></td></tr><trid="my_new_raw"><td><ahref="javascript:void(0);"onclick="addMore()">Add More</a></td><td></td></tr><tr><td>Total</td><td><inputtype="number"readonlyid="my_total"></td></tr></tbody></table>

Solution 2:

If you use blur and keyup, the total will not be changed when changing the number value with arrow. I prefer input event instead. You can trigger the input event when clicking on Remove:

$('.addData').trigger('input');

Working Code Example:

functionaddMore() {
  var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>');
  new_raw.insertBefore('#my_new_raw');
  $("#myTable").on('click', '.remove', function() {
    $(this).parent().parent().remove();
    $('.addData').trigger('input');
  });
}

$(document).on('input', '.addData', function(e) {
  var sum = 0;
  $('.addData').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('addData')) {
        sum += parseFloat(this.value);
      }
    }
  });
  $('#my_total').val(sum.toFixed(2));
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table"id="myTable"><tbody><tr><td>Value 1</td><td><inputtype="number"class="addData"></td></tr><tr><td>Value 2</td><td><inputtype="number"class="addData"></td></tr><trid="my_new_raw"><td><ahref="javascript:void(0);"onclick="addMore()">Add More</a></td><td></td></tr><tr><td>Total</td><td><inputtype="number"readonlyid="my_total"></td></tr></tbody></table>

OR: By using a function

functionaddMore() {
  var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>');
  new_raw.insertBefore('#my_new_raw');
  $("#myTable").on('click', '.remove', function() {
    $(this).parent().parent().remove();
    updateTotal();
  });
}

$(document).on('input', '.addData', function(e) {
  updateTotal();
});

functionupdateTotal(){
  var sum = 0;
  $('.addData').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('addData')) {
        sum += parseFloat(this.value);
      }
    }
  });
  $('#my_total').val(sum.toFixed(2));
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table"id="myTable"><tbody><tr><td>Value 1</td><td><inputtype="number"class="addData"></td></tr><tr><td>Value 2</td><td><inputtype="number"class="addData"></td></tr><trid="my_new_raw"><td><ahref="javascript:void(0);"onclick="addMore()">Add More</a></td><td></td></tr><tr><td>Total</td><td><inputtype="number"readonlyid="my_total"></td></tr></tbody></table>

Solution 3:

Simple wrap the calculate code as function .And use closest() instead of parent().parent()

functionaddMore() {
  var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>');
  new_raw.insertBefore('#my_new_raw');
}


functioncalc() {
  var sum = 0;
  $('.addData').each(function(i) {
    if (!isNaN(this.value) && this.value.length != 0) {
      if ($(this).hasClass('addData')) {
        sum += parseFloat(this.value);
      }
    }
  });
  $('#my_total').val(sum.toFixed(2));
}

$(document).on('blur keyup', '.addData', function(e) {
   calc();
}).on('click', '#myTable .remove', function() {
  $(this).closest('tr').remove();
  calc();
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table"id="myTable"><tbody><tr><td>Value 1</td><td><inputtype="number"class="addData"></td></tr><tr><td>Value 2</td><td><inputtype="number"class="addData"></td></tr><trid="my_new_raw"><td><ahref="javascript:void(0);"onclick="addMore()">Add More</a></td><td></td></tr><tr><td>Total</td><td><inputtype="number"readonlyid="my_total"></td></tr></tbody></table>

Solution 4:

<script>functionaddMore() {
        var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>');
        new_raw.insertBefore('#my_new_raw');
        $("#myTable").on('click', '.remove', function () {
            $(this).parent().parent().remove();
            var sum = 0;
            $('.addData').each(function (i) {
                if (!isNaN(this.value) && this.value.length != 0) {
                    if ($(this).hasClass('addData')) {
                        sum += parseFloat(this.value);
                    }
                }
            });
            $('#my_total').val(sum.toFixed(2));
        });

    }


    $(document).on('blur keyup', '.addData', function (e) {

        var sum = 0;
        $('.addData').each(function (i) {
            if (!isNaN(this.value) && this.value.length != 0) {
                if ($(this).hasClass('addData')) {
                    sum += parseFloat(this.value);
                }
            }
        });
        $('#my_total').val(sum.toFixed(2));
    })
</script>