1

我已经寻找了很多解决方案，但我无法为我的引导表单找到确切的解决方案。

我有下面的代码。我想在输入字段旁边放一个（+）并用（-）添加新字段以删除。

所有使用引导程序完成的示例都没有使用表单组。但我的情况是表单组。我怎么能这样做？

我正在使用引导程序 3.3.6 版本。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-horizontal">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Pickup Time</label>
      <div class="col-md-4">
        <div class="input-group">
          <input type="text" class="form-control"/>
        </div>
        <span class="help-block">Enter the pickup time </span>
      </div>
    </div>
  </div>
  <div class="form-actions right">
    <div class="row">
      <div class="col-md-offset-3 col-md-9">
        <button type="button" class="btn btn-default prev-step">Previous</button>
        <button type="button" class="btn default">Cancel</button>
        <button type="button" class="btn btn-primary next-step blue">
          <i class="fa fa-check"></i>Save and Continue
        </button>
        <button type="button" class="btn btn-primary next-step">Next</button>
      </div>
    </div>
  </div>
</div>

4

1 回答 1

4 

var template = '<div class="input-group"><input type="text" class="form-control"/></div>',
    minusButton = '<span class="btn input-group-addon delete-field">(-)</span>';

$('.add-field').click(function() {
  var temp = $(template).insertBefore('.help-block');
  temp.append(minusButton);
});

$('.fields').on('click', '.delete-field', function(){
  $(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-horizontal">
  <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Pickup Time</label>
      <div class="col-md-4 fields">
        <div class="input-group">
          <input type="text" class="form-control"/>
          <span class="btn input-group-addon add-field">(+)</span>
        </div>
        <span class="help-block">Enter the pickup time </span>
      </div>
    </div>
  </div>
  <div class="form-actions right">
    <div class="row">
      <div class="col-md-offset-3 col-md-9">
        <button type="button" class="btn btn-default prev-step">Previous</button>
        <button type="button" class="btn default">Cancel</button>
        <button type="button" class="btn btn-primary next-step blue">
          <i class="fa fa-check"></i>Save and Continue
        </button>
        <button type="button" class="btn btn-primary next-step">Next</button>
      </div>
    </div>
  </div>
</div>

于 2016-02-08T09:02:44.067 回答