datalist动态操作需用dom方法增删option，无原生add/remove；必须设置value属性供匹配，且list与id须严格一致，否则不生效。
如何用 JavaScript 动态操作 datalist 的 option 元素
直接操作 datalist 里的 option 和操作普通 select 不同：它没有原生的 add() 或 remove() 方法，所有增删都得靠 DOM 操作。关键点是——datalist 本身不渲染，只被关联的 input 读取，所以你改的是它的子节点，不是“选项集合”。
datalist.appendChild() 添加 option 最简方式
别用 innerHTML +=，会重置整个列表、丢失已绑定事件或状态；用 document.createElement('option') + appendChild() 更安全。
- 必须设置
value属性，这是 autocomplete 匹配的唯一依据（textContent可选，但没实际作用） - 可以复用已有
option元素，但注意不要重复添加同一节点（会自动移除再插入） - 示例：
const dl = document.getElementById('myDatalist');<br>const opt = document.createElement('option');<br>opt.value = 'new-item';<br>dl.appendChild(opt);
删除指定 value 的 option 要遍历匹配
datalist 没有类似 querySelector(`[value="xxx"]`) 的快捷删除，因为 option 是子元素，不是“选项对象”。必须手动遍历 dl.children 或 dl.querySelectorAll('option')。
- 推荐用
Array.from(dl.querySelectorAll('option'))遍历，避免 live collection 问题 - 删除时用
el.remove()，不要用parentNode.removeChild(el)（冗余） - 注意大小写敏感：
option.value === 'abc'不等于'ABC' - 示例：
Array.from(dl.querySelectorAll('option'))<br> .filter(opt => opt.value === 'to-delete')<br> .forEach(opt => opt.remove());
为什么动态增删后 input 不生效？检查这三点
常见“明明加了 option 却没提示”的原因基本就这三类：
-
input的list属性值和datalist的id不完全一致（多空格、大小写、拼写错误） - 新增的
option.value是空字符串或只含空白字符（浏览器忽略） - 在页面加载前就执行 JS 操作，
datalist还没被解析进 DOM（确保脚本在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
