Question

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

所以几乎每个input_line（参考我的小提琴）都应该被移除，除了第一个，应该总是留下来。

插图：

enter image description here

我有什么建议可以实现这个目标吗？

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>

jQuery的：

$(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;
    });
});

JSFiddle

非常感谢任何帮助！

Answer 1

当有一行时隐藏删除，否则显示：

http://jsfiddle.net/gqgaswdy/23/

$(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;
     });
});

Answer 2

我想向您展示在实际用于数据绑定的框架中创建此类行为是多么容易（jquery不是，因此您必须编写大量额外/不必要的逻辑）以及knockout.js的示例

Demo

<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());

Answer 3

也许添加这样的新功能：

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

防止删除第一个输入行

3 个答案: