Question

我一直在研究这个脚本，除了$(this).parents(".clonedInput").clone()之外，一切运行良好。 Clone引用按钮放在.clonedInput div中。

我将非常感谢帮助克隆按钮退出clonedInput div并将代码更新为仍然起作用。

的jsfiddle https://jsfiddle.net/dLa4gvau/

Html代码

 <div id="clonedInput1" class="clonedInput">
    <div>
       <td><?php echo $this-     >Form>input('Qualifications.name',array('label'=>''));?></td> 
     </div>
     <div>
        <label for="txtSubCategory" class="">Sub-category <span  class="requiredField">*</span></label>
        <select class="" name="txtSubCategory[]" id="subcategory1">
            <option value="">Please select category</option>
        </select>
    </div>
     <div>
     <label for="txtSubSubCategory">Sub-sub-category <span class="requiredField">*</span></label>
        <select name="txtSubSubCategory[]" id="subsubcategory1">
            <option value="">Please select sub-category</option>
        </select>
    </div>
    <div class="actions">
        <button class="add-row">Clone</button> 
        <button class="remove">Remove</button>
    </div>
    </div>

Jquery代码

  var regex = /^(.*)(\d)+$/i;
  var cloneIndex = $(".clonedInput").length;
  var Add = true;
  var Remove = false;

  setInterval(function(){
  if (cloneIndex == 50) {
  Add = false;
  Remove = true;
  }
  else if (cloneIndex == 1) {
  Remove = false;    
  }else {
  Add = true;
  Remove = true;
  }
  },100);

  $("button.add-row").live("click", function(){
  if (Add == true) {
  $(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);
        }
  });
  cloneIndex++;
  }});

  $("button.remove").live("click", function(){
  if (Remove == true) {
  $(this).parents(".clonedInput").remove();
  cloneIndex--;
  }
  });

Answer 1

一个简单的解决方案是通过CSS隐藏所有其他“添加”按钮：

.clonedInput ~ .clonedInput .add-row{ display:none; }

Answer 2

试试这个，matbe吧：

＆＃13;

var regex = /^(.*)(\d)+$/i;
  var cloneIndex = $(".clonedInput").length;
  var Add = true;
  var Remove = false;

   setInterval(function(){
     if (cloneIndex == 50) {
     Add = false;
     Remove = true;
     }
     else if (cloneIndex == 1) {
     Remove = false;    
     }else {
     Add = true;
     Remove = true;
     }
   },100);

   $(".clone").on("click", function(){
    if (Add == true) {
    var clone = $(".clonedInput").clone()
        
     clone.find('.actions > .clone').remove();
     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);
            }
        
    });
    cloneIndex++;
    }});

   $(".remove").on("click", function(){
    if (Remove == true) {
       $(this).parents(".clonedInput").siblings().remove();
     cloneIndex--;
    }
   });

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clonedInput1" class="clonedInput">
    <div>
       <td><select class="" name="txtSubCategory[]" id="subcategory1">
            <option value="">Please select category</option>
        </select></td> 
    </div>
    <div>
        <label for="txtSubCategory" class="">Sub-category <span class="requiredField">*</span></label>
        <select class="" name="txtSubCategory[]" id="subcategory1">
            <option value="">Please select category</option>
        </select>
    </div>
    <div>
        <label for="txtSubSubCategory">Sub-sub-category <span class="requiredField">*</span></label>
        <select name="txtSubSubCategory[]" id="subsubcategory1">
            <option value="">Please select sub-category</option>
        </select>
    </div>
    <div class="actions">
        <button class="clone">Clone</button> 
        <button class="remove">Remove</button>
    </div>
</div>

＆＃13;

从父div中删除克隆按钮并更新代码

2 个答案: