javascript - 将按钮移出容器时，单击时克隆 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

我认为以下是您要实现的目标，您必须添加另一个变量 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>