本文介绍如何在动态创建的输入框元素被删除后，使用 JavaScript 重新排序剩余元素的索引值。核心思路是在删除元素后，遍历剩余元素，并更新其 id 和 name 属性，使其索引值连续且正确。以下将详细介绍实现方法，并提供代码示例。
实现步骤
删除元素: 首先，需要监听删除按钮的点击事件，并在事件处理函数中删除相应的元素。重新排序: 删除元素后，遍历剩余的元素，并更新它们的 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 += ''; user_row += ''; user_row += ''; user_row += ''; 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开始。
注意事项:
立即学习“Java免费学习笔记（深入）”；
确保你的 HTML 结构与代码示例中的结构一致，特别是 rm-row 类。使用事件委托 $(document).on(‘click’, ‘.deleteWorkRow’, function () { … }); 来监听动态创建的元素的点击事件。使用合适的选择器来选择需要更新 id 和 name 属性的元素。在删除元素后，不需要手动减少 countField 变量，因为重新排序逻辑会根据当前剩余元素的数量自动调整索引值。
总结
通过以上步骤，你就可以在动态创建的输入框元素被删除后，使用 JavaScript 重新排序剩余元素的索引值，确保数据的正确性和一致性。 理解代码逻辑，并根据你的实际项目需求进行适当的修改，可以帮助你更好地解决类似的问题。
以上就是JavaScript：动态调整删除元素后输入框的索引值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526221.html
微信扫一扫 
支付宝扫一扫 
