本文旨在解决在动态创建的表单中，删除元素后重新排序输入框索引值的问题。通过 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 += ''; 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--; });})
删除元素并重新排序索引
当点击删除按钮时，我们需要删除对应的行，并重新调整剩余行的索引。以下是实现此功能的 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 操作可能会影响性能。可以考虑使用更高效的算法或延迟更新。
总结
通过以上步骤，我们可以实现动态表单中删除元素后自动更新索引的功能，确保表单数据的正确性和一致性。这种方法简单易懂，适用于大多数动态表单场景。在实际应用中，可以根据具体需求进行适当调整和优化。
以上就是JavaScript 动态调整删除元素后输入框索引值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526326.html
微信扫一扫 
支付宝扫一扫 
