title: JavaScript calculation when items are deleted
body: <p>I have a problem when I remove a row from my table. I have a function that calculates the total price, sub-total etc, which works fine.</p>
  
  <p>However if I remove a row it will not re-calculate it i.e. remove the cost. </p>
  
  <p>1) How can I fix this?<br>
  2) How can I get NaN to not appear in the "Total Price" column - FIXED<br>
  3) I am no expert with JavaScript, so also any help would be greatly appreciated on improving the existing code!</p>
  
  <p>EDIT: included the x's to delete rows in code snippet (the issue is when you enter values in a row, it calculates them, then when you delete the row it doesn't take away the values from the total)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $(".calculate-rows").keyup(function(event) {
      var total = 0;
      $(".calculate-rows").each(function() {
        var gtotal = 0;
        $(this).find(".rows").each(function() {
          var qty = parseFloat($(this).find(".quantity").val());
          var rate = parseFloat($(this).find(".unit-price").val());
          if (isNaN(qty)) {
            qty = 0;
          }
          if (isNaN(rate)) {
            rate = 0;
          }
          var subtotal = qty * rate;
          var subtotal = qty * rate;
          $(this).find(".total-price").val(subtotal.toFixed(2));
          if (!isNaN(subtotal))
            gtotal += subtotal;
          $(".subtotal").html("&amp;#163;" + gtotal.toFixed(2));
          var discount = $('.discount').val();
          var discount = ((gtotal / 100) * discount);
          var total = (gtotal - discount).toFixed(2);
          if (!isNaN(total))
            $(".total-price").html("&amp;#163;" + total);
        });
      });
    });
  });
  
  var wrapper = $('#addrow');
  var newitem = $('.newitem');
  var removeitem = $('.removeitem');
  $(newitem).click(function(e) {
    e.preventDefault();
    $newrow = $('&lt;tr class="rows"&gt;&lt;td style="border-top: none;"&gt;&lt;input class="form-control" type="text" name="name" required&gt;&lt;/td&gt;&lt;td style="border-top: none;"&gt;&lt;textarea class="form-control" rows="1" name="description"&gt;&lt;/textarea&gt;&lt;/td&gt;&lt;td style="border-top: none;"&gt;&lt;input class="text-center form-control quantity" type="text" value="" name="quantity"&gt;&lt;/td&gt;&lt;td style="border-top: none;"&gt;&lt;input class="text-center form-control unit-price" type="text" value="" name="unit_price"&gt;&lt;/td&gt;&lt;td style="border-top: none;"&gt;&lt;input class="form-control text-center total-price" type="text" value="0.00" readonly&gt;&lt;/td&gt;&lt;td style="border-top: none;" class="text-center"&gt;&lt;a class="removeitem" href="#"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;');
    $(wrapper).append($newrow);
    $newrow.on("click", "a", function(e) {
      e.preventDefault();
      $(this).parent().parent().remove();
    });
  });
  $(removeitem).click(function(e) {
    e.preventDefault();
    $(this).parent().parent().remove();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
  &lt;div class="table-responsive calculate-rows"&gt;
    &lt;table class="table"&gt;
      &lt;thead&gt;
        &lt;a href="#" class="btn newitem btn-primary tooltip-primary"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; New Item&lt;/a&gt;
        &lt;tr&gt;
          &lt;th style="width:25%;"&gt;Item&lt;/th&gt;
          &lt;th style="width:41%;"&gt;Description&lt;/th&gt;
          &lt;th style="width:10%;" class="text-center"&gt;Quantity&lt;/th&gt;
          &lt;th style="width:10%;" class="text-center"&gt;Unit Price (&amp;#163;)&lt;/th&gt;
          &lt;th style="width:10%;" class="text-center"&gt;Total Price (&amp;#163;)&lt;/th&gt;
          &lt;th style="width:4%;"&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="addrow"&gt;
        &lt;tr class="rows"&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="form-control" type="text" name="name" required&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;textarea class="form-control" rows="1" name="description"&gt;&lt;/textarea&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="text-center form-control quantity" type="text" value="" name="quantity"&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="text-center form-control unit-price" type="text" value="" name="unit_price"&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="form-control text-center total-price" type="text" value="0.00" readonly&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;" class="text-center"&gt;&lt;a class="removeitem" href="#"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="rows"&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="form-control" type="text" name="name" required&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;textarea class="form-control" rows="1" name="description"&gt;&lt;/textarea&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="text-center form-control quantity" type="text" value="" name="quantity"&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="text-center form-control unit-price" type="text" value="" name="unit_price"&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="form-control text-center total-price" type="text" value="0.00" readonly&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;" class="text-center"&gt;&lt;a class="removeitem" href="#"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="rows"&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="form-control" type="text" name="name" required&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;textarea class="form-control" rows="1" name="description"&gt;&lt;/textarea&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="text-center form-control quantity" type="text" value="" name="quantity"&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="text-center form-control unit-price" type="text" value="" name="unit_price"&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;"&gt;
            &lt;input class="form-control text-center total-price" type="text" value="0.00" readonly&gt;
          &lt;/td&gt;
          &lt;td style="border-top: none;" class="text-center"&gt;&lt;a class="removeitem" href="#"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;table class="table invoice-table text-right"&gt;
      &lt;tbody class="totals"&gt;
        &lt;tr&gt;
          &lt;td style="border-top: none;"&gt;Sub Total:&lt;/td&gt;
          &lt;td style="border-top: none;"&gt;&lt;strong class="subtotal"&gt;&amp;#163;0.00&lt;/strong&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td style="border-top: none;"&gt;Discount:&lt;/td&gt;
          &lt;td style="width:20%; border-top: none;"&gt;
            &lt;div class="fm-group input-group" style="margin-bottom:0px"&gt;
              &lt;span class="input-group-addon"&gt;%&lt;/span&gt;
              &lt;input type="number" class="form-control text-right discount" value="0"&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td style="border-top: none;"&gt;VAT:&lt;/td&gt;
          &lt;td style="border-top: none;"&gt;&lt;strong&gt;&amp;#163;0&lt;/strong&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td style="border-top: none;"&gt;Amount Due:&lt;/td&gt;
          &lt;td style="border-top: none;"&gt;&lt;strong class="total-price"&gt;&amp;#163;0&lt;/strong&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>