時。減去刪除動態排

Question

到目前爲止該腳本可以：

• 動態添加行和刪除它們。
• 乘以總和小計得到granTotal。

但是我不能從grandTotal中刪除行時刪除。你能告訴我怎樣才能得到它？謝謝。

$(document).on("change", "input", function() { 
    $(".price").keyup(function() { 
     var grandTotal = 0; 
     $("input[name='qty[]']").each(function (index) { 
      var qty = $("input[name='qty[]']").eq(index).val(); 
      var price = $("input[name='price[]']").eq(index).val(); 
      var output = parseInt(qty) * parseInt(price); 
      if (!isNaN(output)) { 
       $("input[name='output[]']").eq(index).val(output); 
       grandTotal = parseInt(grandTotal) + parseInt(output); 
       $('#gran').val(grandTotal); 
      } 
     }); 
    }); 
}); $(document).on('click', '.btn-add', function(e) 
    { 
     e.preventDefault(); 
     var controlForm = $('.controls form:first'), 
      currentEntry = $(this).parents('.voca:first'), 
      newEntry = $(currentEntry.clone()).appendTo(controlForm); 
     newEntry.find('input').val(''); 
     controlForm.find('.btn-add:not(:last)') 
      .removeClass('btn-default').addClass('btn-danger') 
      .removeClass('btn-add').addClass('btn-remove') 
      .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove '); 
    }).on('click', '.btn-remove', function(e) 
    { 
     $(this).parents('.voca:first').remove(); 
     e.preventDefault(); 
     return false; 
    }); 

這裏是HTML：

<div class="container"> 
<div class="control-group" > 
    <div class="controls"> 
     <form role="form" autocomplete="off"> 
      <div class="row">     
       <div class="voca"> 
        <div class="col-md-2"> 
         <input class="form-control qty" name="qty[]" type="text" value=""> 
        </div> 
        <div class="col-md-2"> 
         <input class="form-control price" name="price[]" type="text" value=""> 
        </div> 
        <div class="col-md-2"> 
         <input class="form-control output" placeholder="" name="output[]" type="text" value="" readonly> 
        </div> 
        <button type="button" class="btn btn-success btn-add" > 
         <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add 
        </button> 
       </div> 
      </div>  
     </form> 
     <br> 
     </div> 
    </div> 
    <div id="grand"> 
    Grand Total:<input type="text" name="gran" id="gran" readonly> 
</div> 
</div> 

Answer 1

爲了達到預期的結果，使用下面的按鈕選項點擊

var remVal = $(this).prev().find('input').val(); 
    var grandVal = $('#gran').val(); 
    $(this).parents('.voca:first').remove(); 
    $('#gran').val(grandVal - remVal); 

JS：

$(document).on("change", "input", function() { 
    $(".price").keyup(function() { 
    var grandTotal = 0; 
    var x = []; 
    $("input[name='qty[]']").each(function(index) { 
     var qty = $("input[name='qty[]']").eq(index).val(); 
     var price = $("input[name='price[]']").eq(index).val(); 
     var output = parseInt(qty) * parseInt(price); 
     if (!isNaN(output)) { 
     $("input[name='output[]']").eq(index).val(output); 
     grandTotal = parseInt(grandTotal) + parseInt(output); 
     $('#gran').val(grandTotal); 
     x[0] = grandTotal; 
     } 
    }); 
    }); 
}); 
$(document).on('click', '.btn-add', function(e) { 

    e.preventDefault(); 
    var controlForm = $('.controls form:first'), 
    currentEntry = $(this).parents('.voca:first'), 
    newEntry = $(currentEntry.clone()).appendTo(controlForm); 
    newEntry.find('input').val(''); 
    controlForm.find('.btn-add:not(:last)') 
    .removeClass('btn-default').addClass('btn-danger') 
    .removeClass('btn-add').addClass('btn-remove') 
    .html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove '); 
}).on('click', '.btn-remove', function(e) { 

    var remVal = $(this).prev().find('input').val(); 
    var grandVal = $('#gran').val(); 

    console.log($(this).prev().find('input').val()); 
    $(this).parents('.voca:first').remove(); 
    $('#gran').val(grandVal - remVal); 
    e.preventDefault(); 
    return false; 
}); 

Codepen - http://codepen.io/nagasai/pen/xOajYb