时间戳

首页 > 解决方案 > 动态添加输入字段 Jquery

javascript - 动态添加输入字段 Jquery

问题描述

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

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

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

我已将其移至.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 = '<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>

标签： javascriptjqueryhtmlforms

解决方案

原因是parent('div')从删除按钮是div包含所有内容的。解决此问题的简单方法是将新输入包装并在其自己的div.

另请注意，add_input_button并且field_wrapper已经包含 jQuery 对象，因此您无需再次包装它们。尝试这个：

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

推荐阅读