javascript - 图标克隆元素在错误的位置

Question

当我单击a 行+旁边的旁边时，Input 1将克隆并在第一行旁边-出现 a ，这正是我想要的:-)

但是当我按下+旁边Input 2的-图标时，图标会出现在Input 1.

我无法弄清楚我做错了什么，因为当您单击+旁边时，Input 2我想要-第一行的旁边Input 2

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.controls form:first'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span>-</span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

.entry {
  text-align: left;
  margin-bottom: 25px;
  margin-top: 25px;
}

.entry input {
  height: 50px;
  padding: 10px;
}

.entry input:nth-child(2) {
  margin-left: 25px;
  width: 66%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <form class="school_form" role="form" autocomplete="off">
    <div class="entry input-group">
      <input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'>
      <input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'>
      <span class="input-group-btn">
                           				 <button class="btn btn-success btn-add" type="button">
                                		<span>+</span>
      </button>
      </span>
    </div>
  </form>
</div>
<div class="controls">
  <form class="werk_form" role="form" autocomplete="off">
    <div class="entry input-group">
      <input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'>
      <input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'>
      <span class="input-group-btn">
                           				 <button class="btn btn-success btn-add" type="button">
                                		<span>+</span>
      </button>
      </span>
    </div>
  </form>
</div>

标签： javascripthtml

Answer 1

var controlForm = $('.controls form:first')//这里你也选择了第一个控件，即使你在第二个控件窗体上

所以将其替换为

var controlForm = $(this).closest('.controls').find('form:first')//也是选择最近的

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $(this).closest('.controls').find('form:first'),//you have to select colsest controls
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span>-</span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

.entry {
  text-align: left;
  margin-bottom: 25px;
  margin-top: 25px;
}

.entry input {
  height: 50px;
  padding: 10px;
}

.entry input:nth-child(2) {
  margin-left: 25px;
  width: 66%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <form class="school_form" role="form" autocomplete="off">
    <div class="entry input-group">
      <input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'>
      <input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'>
      <span class="input-group-btn">
                           				 <button class="btn btn-success btn-add" type="button">
                                		<span>+</span>
      </button>
      </span>
    </div>
  </form>
</div>
<div class="controls">
  <form class="werk_form" role="form" autocomplete="off">
    <div class="entry input-group">
      <input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'>
      <input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'>
      <span class="input-group-btn">
                           				 <button class="btn btn-success btn-add" type="button">
                                		<span>+</span>
      </button>
      </span>
    </div>
  </form>
</div>