Question

我正在使用jquery clone。

当我点击添加按钮时，会创建一个包含上述字段的克隆...此克隆正常工作

但是当我点击两次“添加”按钮时，它会创建三个克隆副本......它会创建三个副本，就像那样......

我想当我创建添加按钮时，它每次只创建一个克隆，当我点击删除它删除最后一个克隆...

下面是我的代码..

<fieldset id="exercises">
          <div class="exercise">  

          </div>
</fieldset>

<script>
$('#add_exercise').on('click', function() {  
  $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
  $("#toaddress").clone().val("").appendTo(".box"); 
  $("#sender_name").clone().val("").appendTo(".box"); 
  $("#OrderMobileCountryCode").clone().val("").appendTo(".box"); 
  $("#sender_no").clone().val("").appendTo(".box"); 
  $("#presentation").clone().val("").appendTo(".box");
  $("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo('.box');
  $("<br>").appendTo('.box');
  $("<br>").appendTo('#exercises');          
});

$('#exercises').on('click', '.orange_btn', function() {
  $(this).closest(".exercise").remove();
});
</script>

Answer 1

将动态添加按钮的id从add_exercise更改为remove_exercise

 $("<br><button type='button' class='orange_btn' id='remove_exercise'>Remove</button>").appendTo('.box');

将删除按钮事件更改为

$('#exercises').on('click', '#remove_exercise', function() {
  $(this).closest(".exercise").remove();
});

因为您的代码生成的元素具有相同的id，而后者又会多次触发事件。

尝试修改此代码，

<script>
$('#add_exercise').on('click', function() {  
  $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
  $("#toaddress").clone().val("").appendTo(".box"); 
  $("#sender_name").clone().val("").appendTo(".box"); 
  $("#OrderMobileCountryCode").clone().val("").appendTo(".box"); 
  $("#sender_no").clone().val("").appendTo(".box"); 
  $("#presentation").clone().val("").appendTo(".box");
  $("<br><button type='button' class='orange_btn' id='remove_exercise'>Remove</button>").appendTo('.box');
  $("<br>").appendTo('.box');
  $("<br>").appendTo('#exercises');          
});

$('#exercises').on('click', '#remove_exercise', function() {
  $(this).closest(".exercise").remove();
});
</script>

Answer 2

您正在使用box类将克隆的项目附加到div。第一次它的工作正常，因为只有一个div与box类，但在下一个单击有两个div等等。

像这样更改你的添加按钮点击监听器

   $('#add_exercise').on('click', function() {  
      var newDiv = $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
      var boxDiv = newDiv.find(".box");
      $("#toaddress").clone().val("").appendTo(boxDiv); 
      $("#sender_name").clone().val("").appendTo(boxDiv); 
      $("#OrderMobileCountryCode").clone().val("").appendTo(boxDiv); 
      $("#sender_no").clone().val("").appendTo(boxDiv); 
      $("#presentation").clone().val("").appendTo(boxDiv);
      $("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(boxDiv);
      $("<br>").appendTo(boxDiv);
      $("<br>").appendTo('#exercises');   

});

编辑

我在这里添加了一个代码片段，它运行正常。我使用红色boder用于box类和黑色边框用于addres_box类。

$('#add_exercise').on('click', function() {  
	  var newDiv = $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('#exercises');
	  var boxDiv = newDiv.find(".box");
	  $("#toaddress").clone().val("").appendTo(boxDiv); 
	  $("#sender_name").clone().val("").appendTo(boxDiv); 
	  $("#OrderMobileCountryCode").clone().val("").appendTo(boxDiv); 
	  $("#sender_no").clone().val("").appendTo(boxDiv); 
	  $("#presentation").clone().val("").appendTo(boxDiv);
	  $("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(boxDiv);
	  $("<br>").appendTo(boxDiv);
	  $("<br>").appendTo('#exercises');   
   
});

$('#exercises').on('click', '.orange_btn', function() {
  $(this).closest(".exercise").remove();
});

.address_box{
  padding:10px;
  border:1px solid #000;
}
.box{
border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="itemsto-clone">
<input id="toaddress" value="" name="sender_name">
<input id="sender_name" value="" name="sender_name">
<input id="OrderMobileCountryCode" value="" name="sender_name">
<input id="sender_no" value="" name="sender_name">
<input id="presentation" value="" name="presentation">
  
<div>


<fieldset id="exercises">
  <div class="exercise">

  </div>
</fieldset>

<button id="add_exercise">Add Exercise</button>

Answer 3

您创建了重复的类名'box'，并保持appendTo（'。box'）

所以他们只是将它附加到所有'.box'类

将您的脚本更改为此

$('#add_exercise').on('click', function() {  
  $("<div class='exercise address_box'><div class='box'></div></div>").appendTo('.test');
  var lastbox = $(".box").last();
  $("#toaddress").clone().val("").appendTo(lastbox); 
  $("#sender_name").clone().val("").appendTo(lastbox); 
  $("#OrderMobileCountryCode").clone().val("").appendTo(lastbox); 
  $("#sender_no").clone().val("").appendTo(lastbox); 
  $("#presentation").clone().val("").appendTo(lastbox);
  $("<br><button type='button' class='orange_btn' id='add_exercise'>Remove</button>").appendTo(lastbox);
  $("<br>").appendTo(lastbox);
  $("<br>").appendTo('#exercises');          
});

$('#exercises').on('click', '.orange_btn', function() {
  $(this).closest(".exercise").remove();
});

Answer 4

由于问题不是很明确，以下是实现克隆元素要求的方法。

＆＃13;

var counter = (function(){
  var counter = 1;
  return function(){
    return  counter++;
    }
})();

$('#add_exercise').on('click', function() {  
   var clone = $('#exercises div.exercise:eq(0)').clone();
   clone.find('[id]').each(function(i,c){
     $(c).attr('id', $(c).attr('id') + counter());
     $(c).attr('placeholder', $(c).attr('id'));
   });
   $('#exercises').append(clone)
});

$('#remove_exercise').on('click', function() {
  if($('#exercises div.exercise').length !=1)
    $('#exercises div.exercise:last').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <button id="add_exercise">Add</button>
 <button id="remove_exercise">Remove</button>
</div>
<div id="exercises">
  <div class="exercise">  
    <input id="myId" placeholder="my id" />
    <input placeholder="input with no id" />
  </div>
</div>

＆＃13;

按钮点击

4 个答案: