添加/刪除克隆第一行默認不會刪除

Question

添加/刪除克隆第一行默認不會刪除

添加/刪除克隆第一行默認不會刪除&直接就是SrNo（對於防爆：添加3行而SrNo.2刪除之後，會顯示Problam）

<div id="mainDiv"> 
    <div class="one"> 
     <div class="row"> 
      <div class="input-field col s1"> 
       <input class="sno" type="text" name="Sr" value="1"> 
       <label for="Sr">Sr</label> 
      </div> 
      <div class="input-field col s2"> 
       <input id="item_code" type="text" name="item_code"> 
       <label for="item_code">Item Code</label> 
      </div> 
      <div class="input-field col s3"> 
       <input id="item_name" type="text" name="item_name"> 
       <label for="item_name">Item Name</label> 
      </div> 
      <div class="input-field col s2"> 
       <input type="text" name="quantity" class="quantity"> 
       <label for="quantity">Quantity</label> 
      </div> 
      <div class="input-field col s2"> 
       <input type="text" name="net_rate" class="net_rate"> 
       <label for="net_rate">Net Rate</label> 
      </div> 
      <div class="input-field col s2"> 
       <input type="text" name="total" class="total"> 
       <label for="total">total</label> 
      </div> 
      <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light add ">Add<i class="mdi-content-add"></i></a> 

      </div> 
      <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light delete ">Remove<i class="mdi-content-clear"></i></a> 

      </div> 
     </div> 
    </div> 
</div> 
<div class="input-field col s2"> 
    <input type="text" name="Grand" id="Grand"> 
    <label for="net_rate">Grand Total</label> 
</div> 

    $(document).ready(function() { 
     $(".add").click(function() { 
      var length = $('.one').length; 
      var cloned = $(this).closest('.one').clone(true);   
      cloned.appendTo("#mainDiv").find('.sno').val(length + 1); 
      cloned.find(':input:not(".sno")').val(" "); 
      var parent = $(this).closest('.one'); 
      calculate(parent); 
     }); 
     $('.delete').click(function() { 
      var parent = $(this).closest('.one'); 
      $(this).parents(".one").remove(); 
      calculate(parent); 
     }); 
    }); 

    $(document).on('keyup', '.quantity, .net_rate', function() { 
     var parent = $(this).closest('.one'); 
     calculate(parent); 
    }) 


    function calculate(e){ 
     var q = +$(e).find('.quantity').val(); 
     var n = +$(e).find('.net_rate').val(); 
     var sum = 0; 
     $(e).find('.total').val(q*n); 
     $('.total').each(function(i,e){ 
      sum += +$(e).val();   
     }); 
     $('#Grand').val(sum); 
    }; 

這裏舉例http://jsfiddle.net/fmcbwude/6/

Answer 1

一些修改您的.delete點擊evetn將解決你的問題一樣，

$('.delete').click(function() { 
    // check for length of rows 
    if($('.one').length==1){ 
     alert("This is default row and can't deleted"); 
     return false; 
    } 
    var parent = $(this).closest('.one'); 
    $(this).parents(".one").remove(); 
    calculate(parent); 
    // reset serial numbers again 
    $('.sno').each(function(i){ 
     this.value=i+1; 
    }) 
}); 

Demo