Ich möchte Zähler setzen, die den Wert automatisch inkrementieren und dekrementieren

Question

Ich möchte Zähler setzen, die automatisch ++ den Wert des Namens wie folgt Email1 Email2 usw. durch Klicken auf Feld hinzufügen und weiter, wenn ich auf die Schaltfläche Entfernen klicken sollte - der Wert der E-Mail in umgekehrter Richtung wie Email2 Email1 und so weiter unten ich den Code bin mit,

<div class="input_fields_wrap"> 
<div class="form-group"> 
<label>Email</label> 
<button class="add_field_button">Add More Fields</button> 
<input type="text" class="form-control" name="Email" value="<?php echo htmlspecialchars($team->email);?>" /> 
</div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
var max_fields  = 20; //maximum input boxes allowed 
var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
var add_button  = $(".add_field_button"); //Add button ID 

var x = 1; //initlal text box count 
$(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 
    if(x < max_fields){ //max input box allowed 
     x++; //text box increment 
     $(wrapper).append('<div><input type="text" name="Email"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
    } 
}); 

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
    e.preventDefault(); $(this).parent('div').remove(); x--; 
}) 
}); 
</script> 

E-Mail der Name des Textfeldes ist, und ich will diesen Namen erhöhen oder verringern

Answer 1

Nur folgenden Code geändert:

<input type="text" class="del" id="' + name + '"/> 

und

$(".del").last().parent('div').remove(); 

es wird immer das letzte Element entfernen.

Im Anschluss wird der Arbeits Code einfach den Wert des Textfeldes gesetzt:

 

$(document).ready(function() { 
var max_fields  = 20; //maximum input boxes allowed 
var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
var add_button  = $(".add_field_button"); //Add button ID 

var x = 1; //initlal text box count 
$(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 
    if(x < max_fields){ //max input box allowed 
     x++; //text box increment 
     var name = "Email" + x; 
     $(wrapper).append('<div><input type="text" class="del" id="' + name + '"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
    } 
}); 

$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
    var removeLastName = "Email" + x;  
    e.preventDefault(); $(".del").last().parent('div').remove(); 
    x--; 
}) 
});