jQuery clone()是对多个元素进行追加，而不是只追加一个元素。

Question

我想制作可克隆的表单字段，并将其封装到div中。我可以克隆元素，但问题是，如果我有多组类似的字段，它就会将字段添加到所有其他组中，而不是只添加到我点击的按钮组中。

我怎样才能只为当前的 $(this) 元素，而不是其他元素？

let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');

btnAdd.on('click', function(event) {
  $(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo('.gs-customer-form-group');

});

.gs-customer-field-box {
  background-color: #fff;
  width: 300px;
  margin: auto;
  font-family: sans-serif
}

.gs-customer-btn-group {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.btnDel {
  color: red;
  cursor: pointer;
}

.btnAdd {
  color: green;
  cursor: pointer;
}

.active {
  background-color: yellow;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry1" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
  </div>
</div>

<hr/>

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry2" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
  </div>
</div>

Answer 1

这个问题是由于 .appendTo('.gs-customer-form-group') 调用。这将克隆的内容添加到 每一 .gs-customer-form-group 元素。你只需要附加到与点击的相关的 span. 你已经有了一个对该元素的引用 siblings()所以你可以把它放在一个变量中，以便以后使用。

let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');

btnAdd.on('click', function(event) {
  let $group = $(this).parent().siblings('.gs-customer-form-group');
  $group.children().last().clone().appendTo($group);
});

.gs-customer-field-box {
  background-color: #fff;
  width: 300px;
  margin: auto;
  font-family: sans-serif
}

.gs-customer-btn-group {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.btnDel {
  color: red;
  cursor: pointer;
}

.btnAdd {
  color: green;
  cursor: pointer;
}

.active {
  background-color: yellow;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry1" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
  </div>
</div>

<hr/>

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry2" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
  </div>
</div>

Answer 2

你可以这样做：

let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');

btnAdd.on('click', function(event){
  $(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo($(this).parent().siblings('.gs-customer-form-group'));

});

.gs-customer-field-box{
  background-color: #fff;
  width: 300px;
  margin: auto;
  font-family: sans-serif
}

.gs-customer-btn-group{
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}

.btnDel{
  color: red;
  cursor: pointer;
}

.btnAdd{
  color: green;
  cursor: pointer;
}
.active{
  background-color: yellow;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry1" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
  </div>
</div>

<hr />

<div class="gs-customer-field-box product-singular">
  <h6>Add Customer Details</h6>
  <div class="gs-customer-form-group" id="gs-customer-form-group">
    <div id="entry2" class="clonedInput gs-customer-fields">
      <input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
      <input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
    </div>
  </div>

  <div class="gs-customer-btn-group">
    <span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
    <span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
  </div>
</div>