本文旨在解决在动态创建的表单中，删除元素后重新排序输入框索引值的问题。通过 JavaScript 代码示例，详细讲解如何在删除元素后，自动更新剩余元素的 id 和 name 属性，确保表单数据的正确提交和处理。主要方法是利用 jQuery 选择器找到需要更新的元素，并使用 replace 方法更新属性值中的索引。

在动态 Web 应用开发中，经常需要动态创建和删除表单元素。当表单元素包含数组形式的 id 或 name 属性时（例如 worker[1].NameSurname），删除中间的元素会导致索引不连续，影响数据提交和处理。本文将提供一种使用 JavaScript 和 jQuery 解决此问题的方法。

动态创建表单元素

假设我们有一个按钮，点击后会动态添加包含输入框的行。每个输入框的 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--;
    });
})

删除元素并重新排序索引

当点击删除按钮时，我们需要删除对应的行，并重新调整剩余行的索引。以下是实现此功能的 JavaScript 代码：

企奶奶

一款专注于企业信息查询的智能大模型，企奶奶查企业，像聊天一样简单。

下载

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

$(document).on('click', '#deleteWorkRow', function () {
    $(this).closest('.rm-row').remove();
    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 + ']');
        });
        row.find('[name^="worker["]').attr('name', function (i, name) {
            return name.replace(/\[(\d+)\]/, '[' + index + ']');
        });
    });
});

这段代码首先删除点击的行，然后使用 .rm-row 选择器找到所有剩余的行。对于每一行，它使用 find('[id^="worker["]') 和 find('[name^="worker["]') 选择器找到 id 和 name 属性以 "worker[" 开头的元素。然后，使用 attr() 方法和回调函数来更新这些属性的值。回调函数中的 replace(/\[(\d+)\]/, '[' + index + ']') 使用正则表达式将属性值中的索引替换为新的索引。

注意事项

• 选择器准确性： 确保选择器 '.rm-row' 和 '[id^="worker["]' 能准确匹配到需要更新的元素。
• 索引起始值： 上述代码的索引从 0 开始。如果需要从 1 开始，可以在 index 的基础上加 1。
• 性能优化： 如果表单元素非常多，频繁的 DOM 操作可能会影响性能。可以考虑使用更高效的算法或延迟更新。

总结

通过以上步骤，我们可以实现动态表单中删除元素后自动更新索引的功能，确保表单数据的正确性和一致性。这种方法简单易懂，适用于大多数动态表单场景。在实际应用中，可以根据具体需求进行适当调整和优化。