Question

以下面的代码为例：

<div id="instructor_trainers">    

    <div id="trainer-1" class="trainer-group form-group row">
        <div class="col-md-6">
            <select class="form-control" id="trainers[1][trainer]" name="trainers[1][trainer]">
                <option value="">-- Select --</option>
            </select>
        </div>
        <div class="col-md-6">
            <input type="text" class="trainer-expiration form-control" placeholder="Expiration" id="trainers[1][expiration]" name="trainers[1][expiration]" value="">
        </div>
        <div class="col-xs-12">
            <textarea class="trainer-comments form-control" placeholder="Comments" id="trainers[1][comments]" name="trainers[1][comments]"></textarea>
        </div>
    </div>

    <div id="trainer-2" class="trainer-group form-group row">
        <div class="col-md-6">
            <select class="form-control" id="trainers[2][trainer]" name="trainers[2][trainer]">
                <option value="">-- Select --</option>
            </select>
        </div>
        <div class="col-md-6">
            <input type="text" class="trainer-expiration form-control" placeholder="Expiration" id="trainers[2][expiration]" name="trainers[2][expiration]" value="">
        </div>
        <div class="col-xs-12">
            <textarea class="trainer-comments form-control" placeholder="Comments" id="trainers[2][comments]" name="trainers[2][comments]"></textarea>
        </div>
    </div>

    <div id="trainer-3" class="trainer-group form-group row">
        <div class="col-md-6">
            <select class="form-control" id="trainers[3][trainer]" name="trainers[3][trainer]">
                <option value="">-- Select --</option>
            </select>
        </div>
        <div class="col-md-6">
            <input type="text" class="trainer-expiration form-control" placeholder="Expiration" id="trainers[3][expiration]" name="trainers[3][expiration]" value="">
        </div>
        <div class="col-xs-12">
            <textarea class="trainer-comments form-control" placeholder="Comments" id="trainers[3][comments]" name="trainers[3][comments]"></textarea>
        </div>
    </div>

</div>

div instructor_trainers内的每个training元素都包含三个输入字段，这些字段都包含在trainers数组中。每当创建新元素时，通过将现有元素数量增加1来找到索引。当一个元素被删除时，这个值减1，元素只能按照它们被添加的顺序删除（所以如果我点击我的删除按钮，training-3将被删除，那么trainer-2，最后是培训师-1）。

如果无序删除元素，是否有办法自动更新数组索引。例如，如果我更改了删除函数以删除特定的id（例如trainer-2），是否有办法在删除元素之后移动所有元素的索引值？因此，如果移除trainer-2，则trainer-3中的三个输入的索引值会转移到2？

这可以通过在删除的元素之后重建每个元素来完成，但它只是感觉我错过了一些东西，比如有一种更容易的方法。

Answer 1

暂时我熟悉vue.js或react.js前端框架，我调用以下函数重新索引所有元素：

function reindexTrainerElements(){

    $(".trainer-group").each(function(index) {

        var prefix = "trainers[" + index + "]";
        $(this).find("select").each(function() {
            this.id = this.id.replace(/trainers\[\d+\]/, prefix);
            this.name = this.name.replace(/trainers\[\d+\]/, prefix);
        });
        $(this).find("input").each(function() {
            this.id = this.id.replace(/trainers\[\d+\]/, prefix);
            this.name = this.name.replace(/trainers\[\d+\]/, prefix);
        });
        $(this).find("textarea").each(function() {
            this.id = this.id.replace(/trainers\[\d+\]/, prefix);
            this.name = this.name.replace(/trainers\[\d+\]/, prefix);
        });

    });

}

这是Shawns在this question

中回答的变体

删除html输入数组元素

1 个答案: