添加/删除所有文本框ID增量

Question

如何在所有文本框ID中设置添加/删除自动增量(ItemCode,ItemName添加到+1并删除到-1.)

    <div id="mainDiv">
    <div class="one">
    <div class="row">

    <div class="input-field col s1">
    <input type="text" id="sno" class="sno" name="Sr[]" value="1" >
    <label for="Sr" >Sr</label>
    </div>
    <div class="input-field col s2">
    <input id="ItemCode" type="text" name="ItemCode[]" onKeyUp="showHint(this.value)">
    <label for="ItemCode" >Item Code</label>
    </div>
    <div class="input-field col s2">
    <input id="ItemName" type="text" name="ItemName[]" value=" ">
    <label for="ItemName" >Item Name</label>
    </div>

    <div class="input-field col s1 add">
    <a href="#">Add</a>
    </div>

    <div class="input-field col s1 delete">
    <a href="#">Remove</a>
    </div>
    </div>
    </div>
    </div>

$(document).ready(function () {
$(".add").click(function () {
var length = $('.one').length;
var cloned = $(this).closest('.one').clone(true);        
cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
cloned.find(':input:not(".sno")').val(" ");
var parent = $(this).closest('.one');

});
$('.delete').click(function () {
if($('.one').length==1){
alert("This is default row and can't deleted");
return false;
}
var parent = $(this).closest('.one');
$(this).parents(".one").remove();

// reset serial numbers again
$('.sno').each(function(i){
this.value=i+1;
})
});
});

https://jsfiddle.net/Nilesh_Patel/05e3wtcm/1/这里的例子

Answer 1

这是您可以做的。这也会在删除时重置 id。

由于for标签的属性应该绑定到输入，因此id您可能也想更改这些输入。

$(document).ready(function () {

  $(".add").click(function () {
    var length = $('.one').length;
    var cloned = $(this).closest('.one').clone(true);        
    cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
    cloned.find(':input:not(".sno")').val(" ");
    cloned.find("label[for*='ItemCode']").attr('for', 'ItemCode' + (length+1));
    cloned.find("input[id*='ItemCode']").attr('id', 'ItemCode' + (length+1));
    cloned.find("label[for*='ItemName']").attr('for', 'ItemName' + (length+1));
    cloned.find("input[id*='ItemName']").attr('id', 'ItemName' + (length+1));
    var parent = $(this).closest('.one');
  });

  $('.delete').click(function () {
    if($('.one').length==1){
      alert("This is default row and can't deleted");
      return false;
    }
    var parent = $(this).closest('.one');
    $(this).parents(".one").remove();

    $('.one').each(function(index, item) {
      $(this).find('.sno').val(index+1);
      $(this).find("label[for*='ItemCode']").attr('for', 'ItemCode' + (index+1));
      $(this).find("input[id*='ItemCode']").attr('id', 'ItemCode' + (index+1));
      $(this).find("label[for*='ItemName']").attr('for', 'ItemName' + (index+1));
      $(this).find("input[id*='ItemName']").attr('id', 'ItemName' + (index+1));
    });
  });

});

<div id="mainDiv">
  <div class="one">
    <div class="row">

      <div class="input-field col s1">
        <input type="text" id="sno" class="sno" name="Sr[]" value="1" />
        <label for="Sr" >Sr</label>
      </div>
      <div class="input-field col s2">
        <input id="ItemCode" type="text" name="ItemCode[]" onKeyUp="showHint(this.value)" />
        <label for="ItemCode" >Item Code</label>
      </div>
      <div class="input-field col s2">
        <input id="ItemName" type="text" name="ItemName[]" value=" " />
        <label for="ItemName" >Item Name</label>
      </div>

      <div class="input-field col s1 add">
        <a href="#">Add</a>
      </div>

      <div class="input-field col s1 delete">
        <a href="#">Remove</a>
      </div>
    </div>
  </div>
</div>