javascript - 添加/删除克隆第一行默认不删除

Question

add/remove clone first row default not delete

添加/删除克隆第一行默认不删除&并获取正确的SrNo(例如:添加3行并在看到问题后删除SrNo.2)

<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点击事件中进行一些修改将解决您的问题，例如，

$('.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