JavaScript动态表单：删除行后重排输入元素索引的实现

let countField = 0; // 初始索引通常从0开始，以匹配数组索引
$("#addUSers").click(function () {
    // 构建新的行HTML字符串
    var user_row = '<div class="row rm-row">';

    user_row += '<div class="col-lg-3 col-md-12 col-sm-12">';
    user_row += '<h1></h1>'; // 占位符或行号显示
    user_row += '</div>';

    user_row += '<div id="workin_user' + countField + '" class="col-lg-9 d-flex gap-1">';

    user_row += '<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">';
    user_row += '<fieldset>';
    user_row += '<label for="worker_' + countField + '_NameSurname" class="label-text">Name Surname<span class="text-danger"> *</span></label>';
    // 注意：这里将asp-for替换为直接的id和name属性，以避免框架特定问题
    user_row += '<input class="form-control label-text" id="worker_' + countField + '_NameSurname" name="worker[' + countField + '].NameSurname" type="text" />';
    user_row += '</fieldset>';
    user_row += '</div>';

    user_row += '<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 mt-lg-4 mt-md-5">';
    user_row += '<fieldset>';
    user_row += '<label for="worker_' + countField + '_JobDescription"class="label-text">Job Description<span class="text-danger"> *</span></label>';
    user_row += '<input class="form-control label-text" id="worker_' + countField + '_JobDescription" name="worker[' + countField + '].JobDescription" type="text" />';
    user_row += '</fieldset>';
    user_row += '</div>';

    user_row += '<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 mt-lg-4 mt-md-5">';
    user_row += '<fieldset>';
    user_row += '<label for="deleteWorkRow" class="label-text">DELETE </label>';
    user_row += '<button type="button" class="btn btn-danger delete-row-btn"><span class="fa fa-trash"></span></button>'; // 更改ID为类，因为ID应唯一
    user_row += '</fieldset>';
    user_row += '</div>';

    user_row += '</div>';
    user_row += '</div>';

    $('#inputFieldsContainer').append(user_row);
    countField++; // 递增计数器
});

// 注意：此删除逻辑存在问题，仅作演示
$(document).on('click', '.delete-row-btn', function () {
    $(this).closest('.rm-row').remove(); // 删除最近的父行
    countField--; // 递减计数器
});

// 绑定删除按钮的点击事件
$(document).on('click', '.delete-row-btn', function () {
    // 1. 删除当前行
    $(this).closest('.rm-row').remove();
    countField--; // 更新总行数计数器

    // 2. 遍历所有剩余的行并重排索引
    $('.rm-row').each(function (index) {
        var row = $(this); // 获取当前行jQuery对象

        // 更新当前行内所有输入元素的id属性
        // 查找所有id以"worker["开头的元素
        row.find('[id^="worker["]').attr('id', function (i, currentId) {
            // 使用正则表达式替换id中的数字索引
            // 例如：worker_1_NameSurname 变为 worker_0_NameSurname
            return currentId.replace(/_(\d+)_/, '_' + index + '_');
        });

        // 更新当前行内所有输入元素的name属性
        // 查找所有name以"worker["开头的元素
        row.find('[name^="worker["]').attr('name', function (i, currentName) {
            // 使用正则表达式替换name中的数字索引
            // 例如：worker[1].NameSurname 变为 worker[0].NameSurname
            return currentName.replace(/\[(\d+)\]/, '[' + index + ']');
        });

        // 如果有其他需要更新索引的属性，例如label的for属性，也需要在此处处理
        row.find('label[for^="worker_"]').attr('for', function (i, currentFor) {
             return currentFor.replace(/_(\d+)_/, '_' + index + '_');
        });

        // 如果有显示行号的元素，也可以在这里更新
        // 例如：row.find('h1').text(index + 1);
    });
});