本文介绍如何在动态创建的输入框元素被删除后，使用 JavaScript 重新排序剩余元素的索引值。核心思路是在删除元素后，遍历剩余元素，并更新其 id 和 name 属性，使其索引值连续且正确。以下将详细介绍实现方法，并提供代码示例。

实现步骤

1. 删除元素: 首先，需要监听删除按钮的点击事件，并在事件处理函数中删除相应的元素。
2. 重新排序: 删除元素后，遍历剩余的元素，并更新它们的 id 和 name 属性，使其索引值连续。

代码示例

以下是一个完整的代码示例，展示了如何实现动态调整索引值的功能。

let countField = 1;

$("#addUSers").click(function () {
    var user_row = ('
');

    user_row += '
';
    user_row += '
';
    user_row += '
';

    user_row += '
';

    user_row += '
';
    user_row += '
';
    user_row += 'Name Surname *';
    user_row += '';
    user_row += '
';
    user_row += '
';

    user_row += '
';
    user_row += '
';
    user_row += 'Job Description *';
    user_row += '';
    user_row += '
';
    user_row += '
';

    user_row += '
';
    user_row += '
';
    user_row += 'DELETE ';
    user_row += '';
    user_row += '
';
    user_row += '
';

    user_row += '
';

    user_row += '
';

    $('#inputFieldsContainer').append(user_row);
    countField++;
    /*user_row += ''*/


});

$(document).on('click', '.deleteWorkRow', function () {
    $(this).closest('.rm-row').remove();
    //countField--;  //这里不需要减少countField，因为删除后会重新排序

    // Rebuild the rows with updated id and name attributes
    $('.rm-row').each(function (index) {
        var row = $(this);
        row.find('[id^="worker["]').attr('id', function (i, id) {
            return id.replace(/\[(\d+)\]/, '[' + (index + 1) + ']');
        });
        row.find('[name^="worker["]').attr('name', function (i, name) {
            return name.replace(/\[(\d+)\]/, '[' + (index + 1) + ']');
        });
    });
});

代码解释:

• $("#addUSers").click(function () { ... });: 这段代码监听 addUSers 按钮的点击事件，并在事件处理函数中动态创建包含输入框的 HTML 结构。
• $(document).on('click', '.deleteWorkRow', function () { ... });: 这段代码使用事件委托，监听动态创建的 .deleteWorkRow 按钮的点击事件。
• $(this).closest('.rm-row').remove();: 删除当前按钮所在的 .rm-row 元素。
• $('.rm-row').each(function (index) { ... });: 遍历所有剩余的 .rm-row 元素。
• row.find('[id^="worker["]').attr('id', function (i, id) { ... });: 查找当前行中所有 id 属性以 "worker[" 开头的元素，并更新它们的 id 属性。
• row.find('[name^="worker["]').attr('name', function (i, name) { ... });: 查找当前行中所有 name 属性以 "worker[" 开头的元素，并更新它们的 name 属性。
• id.replace(/\[(\d+)\]/, '[' + (index + 1) + ']'): 使用正则表达式替换 id 或 name 属性中的索引值。(index + 1) 确保索引从1开始，而不是从0开始。

注意事项:

DeepL

DeepL是一款强大的在线AI翻译工具，可以翻译31种不同语言的文本，并可以处理PDF、Word、PowerPoint等文档文件

下载

立即学习“Java免费学习笔记（深入）”；

• 确保你的 HTML 结构与代码示例中的结构一致，特别是 rm-row 类。
• 使用事件委托 $(document).on('click', '.deleteWorkRow', function () { ... }); 来监听动态创建的元素的点击事件。
• 使用合适的选择器来选择需要更新 id 和 name 属性的元素。
• 在删除元素后，不需要手动减少 countField 变量，因为重新排序逻辑会根据当前剩余元素的数量自动调整索引值。

总结

通过以上步骤，你就可以在动态创建的输入框元素被删除后，使用 JavaScript 重新排序剩余元素的索引值，确保数据的正确性和一致性。 理解代码逻辑，并根据你的实际项目需求进行适当的修改，可以帮助你更好地解决类似的问题。