动态表单的核心是name语义一致性而非元素增删，必须统一用name="items[]"等空数组语法，避免显式编号或混用点号/方括号，删除需移除完整DOM节点，新增不拼索引，确保后端接收结构化、无缺失的数组数据。

动态表单的核心不是“怎么加元素”，而是“怎么让 name 语义不崩”。只要 name 写对，浏览器自动聚合成数组，后端开箱即用；写错索引或混用结构，删一项就丢数据。

name 属性必须用 []，别手动编号

显式写 name="items[0]"、name="items[1]" 看似清晰，但 JS 删除中间项后，DOM 上的 name 不会自动重排，后端收到的就是稀疏数组（比如只有 items[0] 和 items[2]），部分框架（如 Express 默认配置）直接忽略缺失索引，导致数据丢失。

• ✅ 正确：统一用 name="items[]"，靠 DOM 节点顺序决定提交顺序
• ✅ 结构化字段也用空键：name="files[][name]"、name="files[][size]"，后端解析时自动补序号
• ❌ 避免：name="items[0].name" —— 点号是后端框架解析的，浏览器原生不认
• ❌ 避免：name="meta[key1]" 和 name="items[0]" 混用 —— 解析结果类型不一致，PHP 可能转成对象+数组混合体

删除表单项必须移除整个 DOM 节点，不能只清空 value

只设 input.value = "" 或 input.remove() 却没删父容器，会导致：表单提交时仍带空值、FormData 里残留字段、JS 逻辑误判“该项还存在”。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• ✅ 删前确认：if (confirm("确定删除？")) { item.parentNode.removeChild(item); }
• ✅ 容器要包裹完整一项：
  ×

  ✅ 删除函数里取 button.parentNode，再调 removeChild() 或直接用 item.remove()

  ⚠️ 注意：如果用了 FormData.append() 手动收集，删除 DOM 后记得同步清理 FormData 实例

  新增表单项时，别用 querySelectorAll.length 算索引

  有人喜欢这样写新增逻辑：const i = document.querySelectorAll('input[name="items[]"]').length; 然后拼 name="items[" + i + "]" —— 这等于把 JS 的管理逻辑和浏览器的提交机制耦死。一旦用户手动删了某项，querySelectorAll 数量变少，但之前生成的 name="items[2]" 还在 DOM 里，照样提交。

  • ✅ 新增一律用 name="items[]"，不拼数字
  • ✅ 如果需要关联字段（如每项带标签+文件+描述），统一用嵌套空键：name="entries[][label]"、name="entries[][file]"
  • ✅ 若需 JS 侧维护数据映射，用 data-id 或 data-index 属性，和 name 解耦

  最易被忽略的是：name 的语义一致性比 DOM 操作本身更关键。删掉一个

  很简单，但若里面混着 name="user[email]" 和 name="user[phone][]"，后端拿到的结构可能完全不可预测——问题不在 JS 怎么删，而在最初 HTML 的 name 设计有没有守住边界。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！