Question

我正在构建此表单，用户可以通过单击+符号来动态添加输入字段。

然后，用户可以通过单击-符号来删除先前添加的输入。

我的问题是，当用户删除一个字段时，所有字段都被删除。我相信这取决于.field_wrapper的位置。

我已经将.field_wrapper移到了各个位置，但似乎没有任何作用。无论哪种方式，都不会删除先前添加的输入，也不会删除所有输入。

有人可以告诉我我所缺少的内容吗。

这是指向fiddle

的链接

$(document).ready(function() {
  var max_fields = 10;
  var add_input_button = $('.add_input_button');
  var field_wrapper = $('.field_wrapper');
  var new_field_html = '<input name="title[]" class="form-control form-item type="text" value="" data-label="title" /><a href="javascript:void(0);" class="remove_input_button" title="remove field">-</a>';
  var input_count = 1;

  //add inputs

  $(add_input_button).click(function() {
    if (input_count < max_fields) {
      input_count++;
      $(field_wrapper).append(new_field_html);
    }
  });

  //remove_input
  $(field_wrapper).on('click', '.remove_input_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    input_count--;
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-horizontal">
    <div class="row field_wrapper">
        <label class="col-md-offset-1 col-sm-3 control-label" for="title">Title</label>
        <div class="col-md-6 col-sm-9 col-10">
            <input id="title" class="form-control form-item required" name="input_title[]" type="text" value="" data-label="title" />
            <a href="javascript:void(0);" class="add_input_button" title="Add field">+</a>
        </div>
    </div>
</form>

Answer 1

原因是因为删除按钮上的parent('div')是{<1>}，其中包含所有内容。解决此问题的简单方法是包装新输入并在其自己的div中删除链接。

还要注意，div和add_input_button已经包含jQuery对象，因此您无需再次包装它们。试试这个：

field_wrapper

$(document).ready(function() {
  var max_fields = 10;
  var $add_input_button = $('.add_input_button');
  var $field_wrapper = $('.field_wrapper');
  var new_field_html = '<div><input name="title[]" class="form-control form-item type="text" value="" data-label="title" /><a href="javascript:void(0);" class="remove_input_button" title="remove field">-</a></div>';
  var input_count = 1;

  //add inputs
  $add_input_button.click(function() {
    if (input_count < max_fields) {
      input_count++;
      $field_wrapper.append(new_field_html);
    }
  });

  //remove_input
  $field_wrapper.on('click', '.remove_input_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    input_count--;
  });
});

动态添加输入字段Jquery

1 个答案: