删除单选按钮前必须确认name属性一致，因浏览器仅允许同名组内单选；删错name或误删会导致选中异常，需用querySelectorAll精确获取目标组，删后手动处理checked状态迁移。
删除单选按钮前必须确认 name 属性一致
HTML 单选按钮（<input type="radio">）靠 name 属性组成逻辑组，浏览器只允许同名组内选中一个。动态删除某个选项时，如果删错了 name 不匹配的元素，或误删了其他组的 radio，会导致选中状态异常甚至整个组失效。
实操要点：
- 用
document.querySelectorAll('input[type="radio"][name="yourGroupName"]')精确获取目标组所有 radio，避免污染其他组 - 不要只靠
id或顺序索引删除——用户可能已选中某一项，删掉它后checked状态不会自动转移到剩下项上，组会“变空” - 如果要保留选中态，得先记录当前
checked的value，再删目标项，最后手动设回剩余项中匹配的那一个
用 remove() 删除 DOM 节点最直接
现代浏览器支持原生 remove() 方法，比 parentNode.removeChild() 更简洁，也无需关心父节点引用是否还有效。
示例：删掉 value 为 "option2" 的 radio
立即学习“前端免费学习笔记（深入）”；
const target = document.querySelector('input[type="radio"][name="choice"][value="option2"]');
if (target) {
target.remove();
}
注意：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
querySelector只返回第一个匹配项，确保 value 唯一；若存在重复 value，要用querySelectorAll配合循环 - 删除后，该 radio 的
checked状态彻底丢失，不会“转移”——这是预期行为，不是 bug - IE 不支持
remove()，如需兼容，改用target.parentNode.removeChild(target)
删完后选中态不恢复？需要手动干预
单选组里删掉当前选中的项，浏览器不会自动选中剩下的任意一个。页面逻辑上可能期望“保持有且仅有一个选中”，这就得自己补逻辑。
常见做法：
- 删之前缓存
document.querySelector('input[name="choice"]:checked')?.value - 删完遍历剩余 radio：
document.querySelectorAll('input[name="choice"]')，找到第一个 value 匹配的并设checked = true - 如果没有匹配项（比如删的是唯一选项，或缓存值已不存在），可设默认项，或清空选中态：
document.querySelector('input[name="choice"]')?.checked = false
这步漏掉，用户会发现“点了提交却没选中任何项”，尤其在表单校验场景下容易出问题。
用 disabled 替代删除更安全？看场景
如果目标只是禁用某个选项（比如后台动态控制可见性），而不是真从 DOM 移除，用 disabled 更稳妥：
document.querySelector('input[name="choice"][value="option3"]').disabled = true;
优势：
- 不破坏 DOM 结构，不影响事件委托或 CSS 选择器稳定性
- 选中态保留（即使被禁用，仍显示为 checked）
- 表单提交时
disabled的 radio 不会发往服务器，效果接近删除
但注意：disabled 元素无法获得焦点、不能响应 click，也不参与 :checked 伪类样式——如果你依赖这些，就得走真实删除。
