本文介绍如何在动态创建的输入框元素被删除后，使用 JavaScript 重新排序剩余元素的索引值。核心思路是在删除元素后，遍历剩余元素，并更新其 id 和 name 属性，使其索引值连续且正确。以下将详细介绍实现方法，并提供代码示例。
实现步骤
- 删除元素: 首先，需要监听删除按钮的点击事件，并在事件处理函数中删除相应的元素。
- 重新排序: 删除元素后，遍历剩余的元素，并更新它们的 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) + ']');
});
});
});代码解释:
- $("#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 重新排序剩余元素的索引值，确保数据的正确性和一致性。 理解代码逻辑，并根据你的实际项目需求进行适当的修改，可以帮助你更好地解决类似的问题。
