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.

function addMore() {
  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();
        });
}

function calculate() {
    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();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="table" id="myTable">
  <tbody>
    <tr>
      <td>Value 1</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr>
      <td>Value 2</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr id="my_new_raw">
      <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td>
      <td></td>
     </tr>
     <tr>
      <td>Total</td>
      <td><input type="number" readonly id="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:

function addMore() {
  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));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="table" id="myTable">
  <tbody>
    <tr>
      <td>Value 1</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr>
      <td>Value 2</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr id="my_new_raw">
      <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td>
      <td></td>
     </tr>
     <tr>
      <td>Total</td>
      <td><input type="number" readonly id="my_total"></td>
     </tr>
  </tbody>
</table>

OR: By using a function

function addMore() {
  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();
});

function updateTotal(){
  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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="table" id="myTable">
  <tbody>
    <tr>
      <td>Value 1</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr>
      <td>Value 2</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr id="my_new_raw">
      <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td>
      <td></td>
     </tr>
     <tr>
      <td>Total</td>
      <td><input type="number" readonly id="my_total"></td>
     </tr>
  </tbody>
</table>

Solution 3:

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

function addMore() {
  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');
}


function calc() {
  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();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="table" id="myTable">
  <tbody>
    <tr>
      <td>Value 1</td>
      <td><input type="number" class="addData"></td>
    </tr>
    <tr>
      <td>Value 2</td>
      <td><input type="number" class="addData"></td>
    </tr>
    <tr id="my_new_raw">
      <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td>
      <td></td>
    </tr>
    <tr>
      <td>Total</td>
      <td><input type="number" readonly id="my_total"></td>
    </tr>
  </tbody>
</table>

Solution 4:

<script>
    function addMore() {
        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>