JavaScript：动态调整删除元素后输入框的索引值

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

实现步骤

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

代码示例

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

let countField = 1;

$("#addUSers").click(function () {
    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 + '" class="label-text">Name Surname<span class="text-danger"> *</span></label>';
    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="JobDescription_' + countField + '"class="label-text">Job Description<span class="text-danger"> *</span></label>';
    user_row += '<input runat="server" 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="deleteWorkRow btn btn-danger"><span class="fa fa-trash"></span></button>';
    user_row += '</fieldset>';
    user_row += '</div>';

    user_row += '</div>';

    user_row += '</div>';

    $('#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) + ']');
        });
    });
});

代码解释:

HueBit AI

一站式AI艺术创作工具

下载

• $("#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开始。

注意事项:

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

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

总结

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