最直接方案是 clone() 后重置 input 值并修正 name/id/label for 属性，避免重复 ID、提交冲突及校验失效；事件绑定须用委托，删除需精准定位当前行。
用 clone() + 重置 input 值是最直接的方案
原生 DOM 或 jQuery 都能做，但核心逻辑一致：复制已有行、清空值、修正 name/id/label for 等属性，避免重复 ID 和提交冲突。不推荐手动拼 HTML 字符串，容易漏掉 required、data-* 或验证规则。
常见错误现象：clone() 后多个 input 共享同一个 id，导致 label 点击只聚焦第一个；提交时同名 name 被覆盖（如 name="phone" 只取最后一个值）；校验插件报错“元素已存在”。
- 必须重命名
name：比如从phone→phone[0]、phone[1]，后端才能接收为数组 - 必须重设
id和对应label[for]，否则语义失效且影响无障碍访问 - 如果用了
bootstrap-fileinput或select2，需在 clone 后调用.fileinput('destroy')或.select2('destroy')再重新初始化
jQuery 的 on('click', '.add-btn', handler) 必须用事件委托
动态添加的按钮本身不存在于初始 DOM，直接 $('.add-btn').click(...) 绑定无效。必须把监听器挂到静态父容器上，靠事件冒泡捕获。
使用场景：点击「+ 添加联系人」按钮，插入新行；点击「× 删除」只删当前行，不影响其他。
性能影响很小，但写错会完全没反应——这是最常被忽略的“为什么点不动”原因。
- 父容器不能是
body，优先选离按钮最近的静态div，比如id="contact-list" - 不要在 handler 里反复调用
$('input[type=file]').on('change', ...)，会导致多次绑定，文件名显示错乱 - 删除行时用
$(this).closest('tr').remove()，别用:last这类模糊选择器，容易误删
bootstrap-table 的 append() 不适合普通表单行添加
bootstrap-table 的 append() 是为「数据驱动表格」设计的，它操作的是内部 data 数组，然后重绘整张表。如果你只是想在普通 <form> 里加几行 <input>，用它反而绕路、卡顿、样式错位。
容易踩的坑：append() 后 input 失去焦点、自定义校验规则丢失、第三方插件（如 flatpickr）未初始化、响应式断点失效。
- 判断标准：你的表格有没有启用
data-toggle="table"？有没有配置columns和data-url？没有就别碰bootstrap-tableAPI - 如果真要用，必须配合
refreshOptions()和resetView()，但多数时候不如直接 DOM 操作快 - 注意
append()参数是对象或数组，不是 HTML 字符串；传错类型会静默失败
后端接收时注意 name 的数组写法和空值过滤
前端加了 5 行，但用户只填了前 2 行，后端拿到的可能是 ["a", "b", "", "", ""]。直接入库会存一堆空字符串或 null，得清洗。
参数差异：PHP 默认支持 name="email[]" 自动转数组；Node.js 的 body-parser 需要显式设置 extended: true；Java Spring Boot 要用 @RequestParam List<String> email。
- 推荐写法：
name="contacts[0].phone"、name="contacts[1].email"，结构化更清晰，也方便后端做嵌套校验 - 提交前用
$('form').serializeArray()检查实际发了什么，比盲猜可靠 - 删除行时，如果后端依赖索引顺序（比如第 3 行对应数据库第 3 条记录），那就不能简单
.remove()，得加个隐藏字段标记deleted: true
关键点其实就两个：属性重命名别偷懒，事件绑定别绑错地方。其它都是围绕这两点展开的细节。
