自動號碼？

Question

我正在嘗試添加更多字段。所以當我按add more按鈕時，它應該添加一個數字1. textfield and a dropdown menu。如果你再按一次，它應該做2. textfield and a dropdown menu。

我創造了這個代碼，以使一個新的領域，但如果我刪除中間

$(document).ready(function() { 
 
    var max_fields = 10; //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="mytext[]"/><a href="#" class="remove_field">Ta bort</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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="input_fields_wrap"> 
 
    <button class="add_field_button">Lägg till fler svar</button> 
 
    <div> 
 
    <input type="text" name="mytext[]"> 
 
    </div> 
 
</div>

Answer 1

如果只是用於顯示目的，使用一個條目計數器將不匹配CSS計數器：

$(document).ready(function() { 
 
    var max_fields = 10; //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++; 
 
     $(wrapper).append('<div class="count"><input type="text" name="mytext[]"/><select><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><a href="#" class="remove_field">Ta bort</a></div>'); //add input box 
 
    } 
 
    }); 
 

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

.input_fields_wrap { 
 
    counter-reset: count; 
 
} 
 
.count:before { 
 
    counter-increment: count; 
 
    content: counter(count) "."; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="input_fields_wrap"> 
 
    <button class="add_field_button">Lägg till fler svar</button> 
 
    <div> 
 
    <input type="text" name="mytext[]"> 
 
    </div> 
 
</div>