layui文本域如何动态增加或减少数量

Layui textarea无法动态增减数量，需用原生JS操作DOM：新增需创建带class="layui-textarea"和lay-auto的节点并挂载后调用form.render('textarea')；删除须彻底移除节点及lay-verify属性，避免verify误校验；推荐用数据数组驱动模板渲染以提升性能。

textarea 元素本身不能“动态增减数量”，只能动态增减 DOM 节点

很多人搜“layui文本域动态增加数量”，其实是想实现「点击按钮新增一个 textarea 输入框」或「删掉某个已存在的」。Layui 本身不提供 textarea 批量管理组件，它只渲染单个表单元素。所谓“动态增减”，本质是用原生 JS 操作 DOM：

1. 新增：创建新的 <textarea class="layui-textarea"></textarea>，插入到目标容器中
2. 删除：调用 element.remove() 或 parentNode.removeChild() 移除对应节点
3. 别试图用 form.render('textarea') 来“刷新”一堆 textarea——这个方法只对初始化时已存在的、带 lay-verifiy 的原始 textarea 生效，对后来 JS 插入的无效
4. 如果要校验新增的 textarea，必须手动给它加 lay-verify="required" 等属性，并在提交前调用 form.verify()，否则 layui 不会管它

新增 textarea 后，如何让它支持 Layui 样式和自动高度？

Layui 的 textarea 样式（圆角、边框、自适应高度）不是靠 CSS 类自动生效的，而是由 form.render() 注入内联样式和事件。但注意：

1. 新增的 textarea 必须有 class="layui-textarea"，否则 form.render('textarea') 不会识别它
2. 必须确保新增节点已挂载到 DOM 中，再调用 form.render('textarea')，否则无效果
3. 自适应高度（lay-auto）需额外加属性：<textarea class="layui-textarea" lay-auto></textarea>，仅加 class 不够
4. 如果你用了 form.on('submit(...)')，新增的 textarea 的 name 必须唯一，否则提交时同名字段会被覆盖

删除 textarea 时，为什么 form.verify() 还校验已删掉的？

因为 form.verify() 默认遍历所有带 lay-verify 的表单元素，不管它是否还在 DOM 里——只要没被移除属性或销毁实例，就仍会被扫到。常见陷阱：

1. 只用 removeChild() 删除节点，但忘了清除它的 lay-verify 属性，下次 submit 仍报错
2. 多个 textarea 共用同一个 name，导致 form.val() 只取最后一个的值，且 verify 逻辑混乱
3. 没重置关联的 JS 变量（比如你用 let textareas = [] 维护列表），删 DOM 后数组未同步，后续操作越界
4. 如果用了 form.on('checkbox') 或其他监听，记得在删除前用 elem.off() 解绑，避免内存泄漏

更稳的做法：用模板字符串 + 一次 render 替代频繁 DOM 操作

频繁增删节点容易引发 layout thrashing 和事件丢失。尤其在小屏设备上，反复触发 form.render() 可能卡顿。推荐做法是：

1. 维护一个纯数据数组，如 let textareaItems = [{id: 1, value: '', required: true}, ...]
2. 每次增删都操作这个数组，然后用模板字符串生成完整 HTML 字符串
3. 一次性写入容器 innerHTML，再调一次 form.render('textarea')
4. 给每个 textarea 的 id 或 data-id 绑定唯一标识，方便后续取值或删除
5. 若需保留光标/焦点状态，得在替换前记录当前 activeElement，替换后再 focus 回去——这点极易被忽略