删除按钮应使用type="button"或调用event.preventDefault()阻止默认提交；用data-*属性安全传ID；禁用window.confirm()改用自定义模态框；删除前存备份支持Undo；防重复点击需按钮置灰+服务端幂等。
点击删除按钮时阻止默认提交行为
很多初学者直接给 <form></form> 包裹的删除按钮写 type="submit"，结果一点击整页刷新或跳转，根本没机会弹确认框。必须用 JavaScript 拦住这个默认动作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 删除按钮统一用
<button type="button"></button>，彻底避免表单提交语义 - 如果非得用
<input type="submit">或<button type="submit"></button>，则在事件监听里必须调用event.preventDefault() - 不要依赖
onclick="return confirm(...) && submit()"这类内联写法——它不可维护，且容易因返回false失效而漏掉阻止
用 data-* 属性安全传递行标识
表格每行删除时需要知道删哪条数据，但绝不能把 ID 拼进 HTML 字符串里再用 eval() 或 innerHTML 解析——XSS 风险极高。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
<tr> 或删除按钮上加 <code>data-id="123"、data-row-index="5"等属性 - JS 中用
element.dataset.id读取，自动做类型转换和转义，比getAttribute('data-id')更安全简洁 - 避免用
id属性存业务 ID（如id="user-456"），因为 ID 必须唯一且不能含特殊字符，容易冲突或解析失败 - 用轻量级 DOM 模态框（比如一个
<div class="confirm-modal">）替代 <code>confirm() - 确认按钮绑定
click事件后才真正发起删除请求；取消按钮只隐藏模态框，不执行任何副作用 - 模态框显示前，给目标
<tr> 加 <code>aria-disabled="true"并设pointer-events: none，防止重复点击 - 务必支持 Esc 键关闭模态框，并聚焦回原按钮（用
focus()），满足可访问性要求 - 先禁用删除按钮并显示 loading 状态（比如加
disabled+textContent = '删除中...'） - 成功响应后再移除
<tr>；失败则还原按钮状态，并用 <code>alert()或 toast 提示（不要静默失败） - 更进一步：删除前把整行
outerHTML存进数组，配合 Undo 按钮实现 5 秒内恢复——这对后台管理类表格很实用 - 注意：若表格用了
display: grid或 CSS-in-JS 动态样式，直接remove()可能导致布局错乱，建议统一用style.display = 'none'+ 标记逻辑删除状态
确认提示不依赖 window.confirm() 做用户体验
window.confirm() 是同步阻塞式弹窗，会冻结整个页面，无法自定义样式、按钮文字，移动端体验极差，且无法捕获用户是点了“取消”还是关掉了弹窗。
实操建议：
立即学习“前端免费学习笔记（深入）”；
删除后 DOM 更新要精准且可逆
删完就 row.remove() 很简单，但一旦网络失败或接口返回错误，用户就丢失了整行数据，且无法撤回。
实操建议：
立即学习“前端免费学习笔记（深入）”；
实际中最容易被忽略的是「删除请求发出去之后，用户又快速点了一次」——这往往导致重复请求、状态错乱甚至误删。防重复的核心不是靠 JS 节流，而是服务端幂等设计 + 前端按钮置灰 + 网络请求未完成时不响应新点击。
