将按钮移出容器时，单击时克隆 div 会中断吗？

Question

我找到了这个漂亮的 js fiddle，它几乎完全符合我的需要

然而，它克隆按钮的父级和 id 喜欢让按钮与实际被克隆的 div 分开。 （如果您使用删除按钮将克隆按钮放回容器中，它将再次正常工作）

总而言之，我正在努力完成 3 件事。

1. 将正在复制的 div 之外的按钮（1 个按钮）

2. 将重复的数量限制为总共 6 个。（或任何可变变量）

3.更新<h4>内容，将数字1改为下一个数字。即：（1-6）

虽然我涉猎，但我不是很精通 JS。如果有人有时间帮我弄清楚以上内容，我将不胜感激！这是我一直在玩的JS FIDDLE。

谢谢！

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".clonedInput").length;

function clone(){
    $(this).parents(".clonedInput").clone()
        .appendTo("body")
        .attr("id", "clonedInput" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
        .on('click', 'button.clone', clone)
        .on('click', 'button.remove', remove);
    cloneIndex++;
}
function remove(){
    $(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);

Answer 1

您可以 select 最后出现的 .clonedInput 并克隆它，然后将其插入到原始元素之后：

var regex = /^(.+?)(\d+)$/i;

function clone(){
    var cloneIndex = $(".clonedInput").length + 1;
    if (cloneIndex > 6) return;

    $source = $(".clonedInput").last();
    $source.clone()
        .insertAfter($source)
        .attr("id", "clonedInput" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
        .on('click', 'button.remove', remove)
        .find('label').html('Learning category ' + cloneIndex + ' <span class="requiredField">*</span>');
}
function remove(){
    $(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="clonedInput1" class="clonedInput">
    <div>
        <label for="txtCategory" class="">Learning category 1 <span class="requiredField">*</span></label>
        <select class="" name="txtCategory[]" id="category1">
            <option value="">Please select</option>
        </select>
    </div>
   
    <div class="actions">
        <button class="remove">Remove</button>
    </div>
</div>

<button class="clone">Clone</button>

Answer 2

我认为以下是您要实现的目标，您必须添加另一个变量 cloned_nbr 和 clones_limit 来控制克隆的 div:

var cloneIndex = 1;
var clones_limit = 4;
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div 

function clone()
{
  if(cloned_nbr<clones_limit)
  {
    cloneIndex++;
    cloned_nbr++;

    var new_clone =  $(".clonedInput").first().clone();

    new_clone.attr("id", "clonedInput" +  cloneIndex);
    new_clone.find(".label-nbr").text(cloneIndex);
    new_clone.find(".category").attr("id","category"+cloneIndex);
    new_clone.find(".remove").attr("id","remove"+cloneIndex);
    new_clone.on('click', 'button.clone', clone);
    new_clone.on('click', 'button.remove', remove);

    $(".clone").before(new_clone);
  }
}
function remove(){
  if(cloneIndex>1){
    $(this).parents(".clonedInput").remove();
    cloned_nbr--;
  }
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);

body { padding: 10px;}

.clonedInput { padding: 10px; border-radius: 5px; background-color: #def; margin-bottom: 10px; }

.clonedInput div { margin: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clonedInput1" class="clonedInput">
  <div>
    <label for="txtCategory" class="">Learning category <span class="label-nbr">1</span><span class="requiredField">*</span></label>
    <select class="category" name="txtCategory[]" id="category1">
      <option value="">Please select</option>
    </select>
  </div>

  <div class="actions">
    <button class="remove">Remove</button>
  </div>
</div>

<button class="clone">Clone</button>

Answer 3

我会将普通块初始化为模板并将其用作克隆基础。

HTML

<div class="box-wrap">
     <button class="clone">Clone</button>
</div>

完整演示：http://jsfiddle.net/jeafgilbert/tfFLt/1898/

将按钮移出容器时，单击时克隆 div 会中断吗？

Cloning div on click breaks when moving the button out of container?

javascript

jquery

clone