hinzufügen/entfernen alle Textbox id Schritt

Question

So stellen Sie Hinzufügen/Entfernen in allen Textbox id Autoinkrement (ItemCode, ItemName Um +1 Hinzufügen und Entfernen von -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/ hier Beispiel

Answer 1

Hier ist, was Sie tun können. Dadurch wird die ID beim Löschen zurückgesetzt.

Da das for Attribut der Beschriftungen an die Eingänge id gebunden sein sollte, sollten Sie diese ebenfalls ändern.

$(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>

Answer 2

versuchen Sie diesen Code Ihrer Add Event hinzufügen

cloned.find('input[name="ItemCode[]"]').attr('id','ItemCode'+(length + 1)); 
cloned.find('input[name="ItemName[]"]').attr('id','ItemName'+(length + 1)); 

Answer 3

Sie können die Seriennummern mit der folgenden Funktion zurücksetzen. die jsfiddle überprüfen https://jsfiddle.net/05e3wtcm/4/

function ResetSerialNumbers(){ 
    $('.sno').each(function(i){ 
    var val = i+1; 
    this.value=val; 
    $(this).closest('.row').find("input[id^='ItemCode']").first().attr("id",'ItemCode'+val); 
    $(this).closest('.row').find("input[id^='ItemName']").first().attr("id",'ItemName'+val); 
}); 
}