click事件不生效因内联onclick不被克隆节点继承且RemoveRow未定义；应改用事件委托绑定父容器；删除后需重编号name属性、用remove()清理DOM、并主动管理焦点以保障可访问性。
动态删除 input 元素时，为什么 click 事件不生效？
因为直接在模板里写 onclick="RemoveRow(this)"，生成的元素没有绑定事件监听器——浏览器不会自动为克隆出来的 DOM 节点重新解析内联事件。更关键的是，RemoveRow 函数若未提前定义或作用域不对，调用会直接报 ReferenceError: RemoveRow is not defined。
正确做法是用事件委托，把监听绑定到父容器上：
$("#gridrow-field-container").on("click", ".input-group-text", function() {
$(this).closest(".row").remove();
});
- 确保父容器（如
#gridrow-field-container）在页面加载时已存在，且 ID 唯一 - 选择器用类名（如
.input-group-text）而非内联onclick，避免重复绑定和作用域污染 -
$(this).closest(".row")比$(this).parent().parent()更健壮，不受 HTML 结构微调影响
删除后如何防止 name 属性重复导致后端接收错乱？
如果所有 input 的 name 都是 name[]，删掉中间某一项后，数组索引不会自动重排，PHP/Node.js 等后端收到的仍是稀疏数组（比如 name[0]、name[2] 缺失），容易引发逻辑错误或验证跳过。
建议改用带明确索引的命名 + 动态重编号：
立即学习“前端免费学习笔记（深入）”；
<input type="text" name="name[0]"> <input type="text" name="name[1]">
删除后执行重编号逻辑：
function reindexInputs() {
$("#gridrow-field-container .row").each(function(i) {
$(this).find('input').attr("name", `name[${i}]`);
});
}
- 每次删除后立即调用
reindexInputs() - 避免用
name="name[]"依赖后端自动转数组，尤其当字段含嵌套结构（如user[0][email]）时更易出错 - 如果后端强依赖空数组语法，可在提交前用
FormData手动扁平化数据，而不是靠 DOM name 属性
用 remove() 还是 detach()？
多数场景下用 remove() 就够了，但它会彻底清除元素及其绑定的 jQuery 数据与事件。如果你需要“暂存”被删控件（比如支持撤销），就得用 detach()。
-
remove()：适合一次性删除，内存释放干净，DOM 清理彻底 -
detach()：保留所有 jQuery 关联数据（如.data()、事件委托状态），但移除 DOM；后续可插回任意位置 - 别用
hide()或css("display", "none")冒充删除——这些字段仍会随表单提交，后端可能误处理
删除操作后，如何避免焦点残留或键盘操作异常？
用户删掉当前聚焦的输入框后，焦点可能丢失或卡在空白处，按 Tab 键跳转会中断。这不是视觉问题，而是可访问性硬伤。
应在删除后主动管理焦点：
$(this).closest(".row").remove();
if ($("#gridrow-field-container .row").length > 0) {
$("#gridrow-field-container .row:last input").focus();
} else {
// 无剩余项时，把焦点移到添加按钮或表单顶部
$("#add-row-btn").focus();
}
- 必须检查剩余元素数量，否则
:last会匹配空集合，.focus()无效 - 不要假设用户一定用鼠标操作；键盘导航（Tab / Shift+Tab）和屏幕阅读器依赖明确的焦点流
- 如果表单很长，删除后滚动到新焦点位置（用
.scrollIntoView({ block: "nearest" })）能进一步提升体验
