删除动态创建行后重排输入元素的索引值问题

你的核心问题是删除行后未同步更新剩余行的编号属性，同时原代码存在重复ID的HTML规范问题，以下是修复后的完整代码及关键改动说明：

let countField = 1;

// 添加新行
$("#addUSers").click(function () {
    // 用ES6模板字符串重构HTML，提升可读性
    const user_row = `
        <div class="row rm-row">
            <div class="col-lg-3 col-md-12 col-sm-12">
                <h1></h1>
            </div>
            <div id="workin_user${countField}" class="col-lg-9 d-flex gap-1">
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">
                    <fieldset>
                        <label for="worker_${countField}" class="label-text">Name Surname<span class="text-danger"> *</span></label>
                        <input class="form-control label-text" asp-for="worker[${countField}].NameSurname" name="worker[${countField}].NameSurname" type="text" />
                    </fieldset>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">
                    <fieldset>
                        <label for="JobDescription_${countField}" class="label-text">Job Description<span class="text-danger"> *</span></label>
                        <input runat="server" class="form-control label-text" asp-for="worker[${countField}].JobDescription" name="worker[${countField}].JobDescription" type="text" />
                    </fieldset>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 mt-lg-4 mt-md-5">
                    <fieldset>
                        <label class="label-text">DELETE </label>
                        <button type="button" class="btn btn-danger delete-work-row"><span class="fa fa-trash"></span></button>
                    </fieldset>
                </div>
            </div>
        </div>
    `;

    $('#inputFieldsContainer').append(user_row);
    countField++;
});

// 删除行事件（用class代替重复ID）
$(document).on('click', '.delete-work-row', function () {
    $(this).closest('.rm-row').remove();
    // 删除后立即重新排序所有行的编号
    reorderRows();
});

// 核心：重新排序所有行的编号属性
function reorderRows() {
    $('.rm-row').each(function(index) {
        const newNum = index + 1; // 从1开始重新编号
        const workinDiv = $(this).find('[id^="workin_user"]');
        
        // 更新外层容器ID
        workinDiv.attr('id', `workin_user${newNum}`);
        
        // 更新姓名输入组的label和input属性
        const nameLabel = workinDiv.find('label[for^="worker_"]');
        const nameInput = workinDiv.find('input[name*=".NameSurname"]');
        nameLabel.attr('for', `worker_${newNum}`);
        nameInput.attr({
            'name': `worker[${newNum}].NameSurname`,
            'asp-for': `worker[${newNum}].NameSurname`
        });
        
        // 更新工作描述输入组的label和input属性
        const jobLabel = workinDiv.find('label[for^="JobDescription_"]');
        const jobInput = workinDiv.find('input[name*=".JobDescription"]');
        jobLabel.attr('for', `JobDescription_${newNum}`);
        jobInput.attr({
            'name': `worker[${newNum}].JobDescription`,
            'asp-for': `worker[${newNum}].JobDescription`
        });
    });
    // 同步countField，确保新增行时编号连续
    countField = $('.rm-row').length + 1;
}

关键改动说明 #

• 修复重复ID问题：将删除按钮的id="deleteWorkRow"改为class.delete-work-row，避免违反HTML唯一ID的规范。
• 重构HTML拼接：用ES6模板字符串替代传统字符串拼接，大幅提升代码可读性和维护性。
• 新增重排序函数：删除行后调用reorderRows，遍历所有剩余行，从1开始重新更新以下属性：
  • 外层容器的ID（workin_userX）
  • Label的for属性，确保与对应input关联正确
  • Input的name和asp-for属性，保证后端模型绑定能正确识别顺序
• 同步计数变量：重排序后更新countField为当前行数+1，避免新增行时出现编号跳号或重复问题。

内容的提问来源于stack exchange，提问作者IlirM