在jQuery中使用clone（）来更新id并将加号按钮更改为减号按钮

Question

当我在StackOverflow上搜索克隆函数时，我得到了很多例子。但是我以不同的方式使用它。

当我点击＆＃39; +＆＃39;按钮它必须克隆整个div和第一个div＆＃39; +＆＃39;图标必须更改为＆＃39; - ＆＃39;所有行都类似。参考图像如下。

这是我的HTML代码

<div class="container-fluid cloned-row">
<div class="row-fluid">    
    <div class="col-xs-12">
        <div id="div_form1">
            <input type = "text" id="txt_fname" name="txt_fname" placeholder="First Name"/>
            <select id="opt_sel" name="opt_sel">
                <option value="default">
                    Select
                </option>
                <option value="banana">
                    Bananana
                </option>
            </select>   
            <button id="btn_sub" class="plus"></button>
        </div>
    </div>
</div>

这是我的JavaScript代码

var i=1;
$("#btn_sub").click(function (){
  $(".cloned-row:first").clone().insertAfter(".cloned-row:last")each(function() {
     $(this).attr({
      'id': function(_, id) { return id + i },
      'name': function(_, name) { return name + i },
      'value': ''               
   });     
  });
  i++;
 });

这是我的JS Fiddle Link

由于我是jQuery的新手，我在克隆功能方面遇到了很多困难。另外，我不明白为什么动态ID没有生成。

Answer 1

您可以使用CSS更轻松地显示/隐藏元素。例如，如果为每行添加加号和减号：

<button class="plus"></button>
<button class="minus"></button>

这将显示所有内容的减号，但最后一行的加号：

.cloned-row .plus {
     display: none;
}

.cloned-row:last-child .minus {
    display: none;
}

.cloned-row:last-child .plus {
    display: inline-block;
}

然后使用事件委派将.plus的任何点击处理为“添加行”

演示：http://jsfiddle.net/4u9ud167/4/