JavaScript动态增减input需操作DOM：创建元素→设属性→插入容器→绑定删除；禁用innerHTML拼接；删除时同步清理DOM和数据引用；提交前用[name^="xxx"]清空动态字段；iOS需手势内立即focus且确保可见。
用 JavaScript 动态增减 input 元素需操作 DOM 节点，不能靠纯 HTML 实现
HTML 的 <input> 标签本身不支持“自动增减”，必须配合 JavaScript 操作 DOM 才能实现。常见错误是试图用 name="field[]" 或 multiple 属性触发多值输入——那只是让单个 input 接收多个值，不是新增 input 元素。
核心逻辑是：创建新 <input> 节点 → 设置 type/name/placeholder 等属性 → 插入到目标容器（如 <div id="inputs-container">）→ 绑定删除按钮或事件。
- 每次添加都应生成唯一
id或用data-index标记顺序，避免后续删除时定位错乱 - 不要用
innerHTML += '...'拼接字符串添加，会重置已有 input 的value和焦点状态 - 推荐用
document.createElement('input')+container.appendChild()组合，安全且可预测
删除 input 时必须同步移除 DOM 和对应数据引用
只调用 element.remove() 或 parentNode.removeChild() 是不够的。如果业务中维护了一个 inputList = [] 数组来跟踪所有动态 input，删除 DOM 后没从数组里 filter() 或 splice() 对应项，下次遍历就会报错或漏删。
更稳妥的做法是：每个动态 input 都绑定一个删除按钮，点击时通过 event.target.closest('div.input-group') 定位父容器，再统一清理内部 input、按钮和数据项。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 删除前检查是否只剩最后一个 input，防止用户误删到无法输入
- 若该 input 已有值，可加
confirm()提示，但别在移动端默认弹窗（Safari 可能拦截） - 不要用
display: none伪装删除——表单提交时它仍会发送空值
表单提交时如何只清空动态添加的 input，保留静态字段
动态添加的 input 通常用于“多值同类型”场景（如多个技能、多个邮箱），提交后往往需要清空它们，但不能影响姓名、手机号等固定字段。最可靠的方式是在 form.addEventListener('submit', ...) 回调里手动设值：
form.addEventListener('submit', (e) => {
e.preventDefault();
const dynamicInputs = form.querySelectorAll('[name^="skill_"], [name^="email_"]');
dynamicInputs.forEach(input => {
if (input.type === 'checkbox' || input.type === 'radio') {
input.checked = false;
} else {
input.value = '';
}
});
// 后续执行 fetch 或 submit()
});
- 用
[name^="xxx"]属性选择器比 class 更稳定，避免样式类被复用干扰 - 对
type="select-one"要设selectedIndex = -1，不是value = '' - 别在
fetch().then()里清空——请求失败时用户看不到已输内容，无法重试
移动端 iOS 下动态 input 的 focus 行为容易失效
iOS Safari 对动态插入的 <input> 调用 .focus() 有严格限制：必须是用户手势（如 click/tap）直接触发的回调内执行，且不能跨微任务延迟。常见坑是异步加载完再 input.focus()，结果静默失败。
- 添加后立即调用
input.focus()，不要包在setTimeout(..., 0)或Promise.resolve().then()中 - 确保 input 已插入 DOM 且
offsetParent !== null（即已渲染可见） - 若容器用了
display: none切换显示，先show再focus，否则 iOS 不响应
name="phone_2"），否则后端收到的永远只是第一个值；而前端校验时又得靠这个 name 去匹配规则——name 不一致，整个验证链就断了。** 
