动态表单的核心是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 逻辑误判“该项还存在”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- ✅ 删前确认：
if (confirm("确定删除？")) { item.parentNode.removeChild(item); } - ✅ 容器要包裹完整一项：
<div class="form-item"> <input name="tags[]"><button onclick="removeItem(this)">× <li>✅ 删除函数里取 <code>button.parentNode，再调removeChild()或直接用item.remove() - ⚠️ 注意：如果用了
FormData.append()手动收集，删除 DOM 后记得同步清理FormData实例 - ✅ 新增一律用
name="items[]"，不拼数字 - ✅ 如果需要关联字段（如每项带标签+文件+描述），统一用嵌套空键：
name="entries[][label]"、name="entries[][file]" - ✅ 若需 JS 侧维护数据映射，用
data-id或data-index属性，和name解耦
新增表单项时，别用 querySelectorAll.length 算索引
有人喜欢这样写新增逻辑：const i = document.querySelectorAll('input[name="items[]"]').length; 然后拼 name="items[" + i + "]" —— 这等于把 JS 的管理逻辑和浏览器的提交机制耦死。一旦用户手动删了某项，querySelectorAll 数量变少，但之前生成的 name="items[2]" 还在 DOM 里，照样提交。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：name 的语义一致性比 DOM 操作本身更关键。删掉一个 <div class="form-item"> 很简单，但若里面混着 <code>name="user[email]" 和 name="user[phone][]"，后端拿到的结构可能完全不可预测——问题不在 JS 怎么删，而在最初 HTML 的 name 设计有没有守住边界。
