JavaScript 动态调整删除元素后输入框索引值-js教程-PHP中文网

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

聖光之護

发布： 2025-10-04 14:33:38

原创

567人浏览过

javascript 动态调整删除元素后输入框索引值

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

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

动态创建表单元素

假设我们有一个按钮，点击后会动态添加包含输入框的行。每个输入框的 id 和 name 属性都包含一个递增的索引。

<div id="inputFieldsContainer">
    <!-- 动态添加的行将在这里显示 -->
</div>
<button id="addUSers">添加用户</button>

登录后复制

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" id="deleteWorkRow" class="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--;
    });
})

登录后复制

删除元素并重新排序索引

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

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

立即学习“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 + ']') 使用正则表达式将属性值中的索引替换为新的索引。