javascript - 如何动态更新文本框id？

Question

此代码取自 here .

如果我想删除一个文本框，如何更新其余文本框id？例如，如果我删除第三行的文本框，那么第四行的文本框现在的 id 应该为 3，而不是 4 。

   $(document).ready(function() {
        var max_fields      = 10; /
        var wrapper         = $(".input_fields_wrap"); 
        var add_button      = $(".add_field_button");     
        var x = 1; //initlal text box count
        $(add_button).click(function(e){ 
            e.preventDefault();
            if(x < max_fields){ 
                x++; 
                $(wrapper).append('<div><input type="text" name="mytext[]"/><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--;
        })
    });
    <div class="input_fields_wrap">
        <button class="add_field_button">Add More Fields</button>
        <div><input type="text" name="mytext[]" id =" + x + "></div>
    </div>

Answer 1

很简单，给所有的文本框一个类，名称可以是任何东西，之后，使用 jquery 的类选择器获取所有文本框，如下所示

$(".your-class-name")

这会返回一个文本框数组。然后你像这样迭代该数组，

$(".your-class-name").forEach(function(textbox,i) {
   $(textbox).attr('id', i+1); // i is the index, starts with 0
});

这将迭代所有文本框