Javascript 防止删除第一个输入行

所以我一直在搞动态输入字段，一切都很好。我遇到的唯一问题是阻止删除第一个

输入行

因此，除了第一行之外，几乎所有的
输入行（请参阅我的exmaple小提琴）都应该可以删除，而第一行应该一直保留

说明：


有什么建议我可以做到这一点吗

HTML:

<form action="javascript:void(0);" method="POST" autocomplete="off">
    <button class="add">Add Field</button>
    <div class='input_line'>
        <input type="text" name="input_0" placeholder="Input1"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove">
    </div>
</form>

$(document).ready(function () {
    'use strict';
    var input = 1,
        blank_line = $('.input_line');

    $('.add').click(function () {
        var newElement = blank_line.clone(true).hide();
        $('form').append(newElement);
        $(newElement).slideDown();
    });

    $('form').on('click', '.duplicate', function () {
        $(this).parent().clone().hide().insertAfter($(this).parent().after()).slideDown();
        $('.input_line').last().before($('.add'));
        input = input + 1;
    });

    $('form').on('click', '.remove', function () {
        $(this).parent().slideUp(function () {
            $(this).remove();
        });
        $('.input_line').last().before($('.add'));
        input = input - 1;
    });
});


任何帮助都将不胜感激
 可能会添加如下新功能：

function HideRemoveButton(){
        if($('.input_line').length <= 1){
            $('.remove').hide()
        }
        else{
            $('.remove').show()
        }
    }

函数隐藏移动按钮（）{
如果（$（'.input_line'）.length在有一行时隐藏删除，否则显示：


$（文档）.ready（函数（）{
"严格使用",；
变量输入=1，
空白_行=$（'.input_行'）；
var=false；
$（'.remove'）.hide（）；
$（'.add'）。单击（函数（）{
var newElement=blank_line.clone（true.hide（）；
$（'form'）.append（新元素）；
$（新元素）.slideDown（）；
$（'.remove'）.show（）；
});
$（'form'）。在（'click'，'duplicate'，函数（）{
$（this.parent（）.clone（）.hide（）.insertAfter（$（this.parent（）.after（））.slideDown（）；
$（'.input_line'）.last（）.before（$（'.add'））；
$（'.remove'）.show（）；
输入=输入+1；
});
$（'form'）。在（'click'，'remove'，函数（）上{
如果（正在删除）{
回来
}否则{
if（$（'.input_line'）.length只是想用knockout.js的例子向您展示在实际用于数据绑定的框架中创建这种行为是多么容易（jquery不是这样，所以您必须编写很多附加/不必要的逻辑）



复制
去除
添加行
变量行=函数（名称）{
this.name=ko.observable（name）；
}; 
函数表模型（）{
var self=这个；
self.rows=ko.observearray（[]）；
self.addRow=函数（）{
self.rows.push（新行（“”））；
};
self.duplicate=函数（a）{
self.rows.push（新行（a.name（））；
};
self.remove=函数（a）{
self.rows.remove（a）；
};
}
应用绑定（新的TableModel（））；
你能用提琴更新你的答案来演示这一点吗？你能用提琴更新你的答案来演示这一点吗？我刚刚用提琴模拟了你的代码，但它没有像我在问题中说明的那样工作。感谢你的演示，但这似乎仍然不起作用，它只是禁用了每个删除按钮。N我不确定我们是不是在看同一把小提琴。我刚刚更新了它。在firefox和chromeYeah中对我有效。更新的版本似乎可以工作，唯一的问题是如果你按住顶部的“删除”按钮一次删除一堆行，它有时会删除第一行。对此进行了修复？非常酷。谢谢你突出显示了r、 也许更合适，technology@MaciejKwas，直到现在我还没听说过knockout，它确实大大减少了代码。也许我会进一步研究它，看起来相当有趣。
$(document).ready(function () {
     'use strict';
     var input = 1,
          blank_line = $('.input_line');
     var removing = false;
     $('.remove').hide();

     $('.add').click(function () {
          var newElement = blank_line.clone(true).hide();
          $('form').append(newElement);
          $(newElement).slideDown();
          $('.remove').show();
     });

     $('form').on('click', '.duplicate', function () {
          $(this).parent().clone().hide().insertAfter($(this).parent().after()).slideDown();
          $('.input_line').last().before($('.add'));
          $('.remove').show();
          input = input + 1;
     });

     $('form').on('click', '.remove', function () {
          if (removing) {
                return;
          } else {
                if ($('.input_line').length <= 2) $('.remove').hide();
                $(this).parent().slideUp(function () {
                     $(this).remove();
                     removing = false;
                });
                $('.input_line').last().before($('.add'));
                input = input - 1;
          }
          removing = true;
     });
});

<div data-bind="foreach: rows">
    <div>
    <input type="text" data-bind="value: $data.name">
    <button data-bind="click: $root.duplicate">Duplicate</button>
    <button data-bind="click: $root.remove, enable: $root.rows().length > 1">Remove</button>
    </div>
</div>
<button id="button" data-bind="click: addRow">add Row</button>

var row = function(name) {         
    this.name = ko.observable(name);
}; 

function TableModel() {
    var self = this;
    self.rows = ko.observableArray([]);
    self.addRow = function() {
        self.rows.push( new row('') );
    };
    self.duplicate = function(a) {
        self.rows.push( new row(a.name()) );
    };
    self.remove = function(a) {
        self.rows.remove(a);
    };
}
ko.applyBindings(new TableModel());