<p>removeAttribute() 删除 data 属性需传完整带 data- 前缀的名称；批量删除须用 getAttributeNames() 筛选或手动转驼峰键为连字符格式；dataset 赋值 undefined/null 无效且会设字符串值；框架内应优先更新状态而非手动操作 DOM。</p>
用 removeAttribute() 删除单个 data 属性
最直接的方式就是调用元素的 removeAttribute() 方法，传入完整的 data 属性名（带 data- 前缀）。浏览器原生支持，无需额外库。
常见错误是只传属性名不带前缀，比如想删 data-id 却写成 el.removeAttribute('id') —— 这完全无效，也不会报错，属性还在。
-
el.removeAttribute('data-user-id')✅ 正确 -
el.removeAttribute('user-id')❌ 不会删除任何东西 -
el.removeAttribute('dataset.userId')❌dataset是只读对象，不能当属性名传
批量删除多个 data 属性要用循环
dataset 对象能读取所有 data-* 属性，但不能直接清空。想删掉全部，得遍历 Object.keys(el.dataset)，再逐个调用 removeAttribute()。
注意：el.dataset 的键名会自动转为驼峰式（如 data-user-id → userId），但 removeAttribute() 必须用原始连字符形式，所以不能直接拿 dataset 的键去删。
立即学习“前端免费学习笔记（深入）”；
- 先用
Object.keys(el.dataset)拿到驼峰键列表 - 再把每个驼峰键转回连字符格式（例如
'userId'→'data-user-id'），可用正则或手写映射 - 对每个转换后的字符串调用
el.removeAttribute() - 或者更稳妥：用
el.getAttributeNames().filter(n => n.startsWith('data-'))直接获取原始属性名
用 dataset 赋值 undefined 或 null 无效
有人尝试 el.dataset.userId = undefined 或 el.dataset['user-id'] = null，期望删除属性 —— 这不会起作用。赋值 undefined 或 null 会被转成字符串 "undefined" 或 "null"，反而新增一个值。
-
el.dataset.userId = undefined→ 实际设置data-user-id="undefined" -
el.dataset.userId = null→ 实际设置data-user-id="null" -
delete el.dataset.userId→ 语法错误，dataset不可 delete
Vue/React 等框架里不要手动操作 DOM data 属性
如果元素由框架渲染，且 data-* 是通过绑定（如 Vue 的 :data-id="xxx" 或 React 的 data-id={xxx}）动态生成的，直接用 removeAttribute() 可能被下一次 re-render 覆盖。这时候应该改状态或 prop，让框架控制属性存在与否。
手动 DOM 操作和声明式更新混用，容易导致视图与状态不一致，尤其在条件渲染或列表更新时，data 属性可能“闪现”或残留。
真正需要删 data 属性的场景，通常是做调试、埋点清理、或配合第三方库（比如某些地图 SDK 依赖特定 data 属性触发行为），这时才绕过框架直操作 DOM。
