Javascript 如何删除选定的单选按钮并一次标记一个？

我无法删除单选按钮和标签。我无法理解get the remove函数如何获取所选单选按钮并移除按钮和关联标签

function removeRadioItem() {
  var radios = document.getElementsByName("attr_radio");
  for (var i = 0; i < radios.length; i++) {
    radio = radios[i];
    if (radio.checked) {
      radio.parentNode.removeChild(radio);
    }
  }
}

这是addNewRadioItem函数上的

，添加新的单选框时，应使用span或div覆盖，因此将单选按钮和标签放在一个元素中并添加该元素

在拆卸按钮上，取下覆盖收音机和标签的元件

放射性透射电镜的功能{ var htmlRadio=document.getElementById'radiopreview'； var optionValue=document.getElementById'txtRadioValue'； var optionDisplaytext=document.getElementById'txtRadioDisplayValue'； 如果optionValue.value=={ 警告“请输入选项值”； optionValue.focus； 返回false； } 如果选项DisplayText.value=={ 警报“请输入选项显示文本”； optionDisplaytext.focus； 返回false； } var radiobox=document.createElementinput； radiobox.type='radio'； radiobox.value=optionDisplaytext.value； radiobox.id=optionValue.value； radiobox.name='attr_radio'； var label=document.createElement'label' label.htmlFor=optionDisplaytext.value； 变量说明=document.createTextNodeoptionDisplaytext.value； 标签.附加说明； var radioDiv=document.createElement'span'； radioDiv.RadioBox； radioDiv.appendChildlabel； var container=document.getElementById'radiopreview'； container.appendChildradioDiv； alertOption已成功添加； optionValue.value=； optionDisplaytext.value=； } 函数删除程序{ var radios=document.getElementsByNameattr\u radio； 对于变量i=0；i像那样直接插入DOM有点乱。特别是如果您想在某个时候进入React，那么您需要远离直接的DOM操作

我建议您使用一个带有所有附加无线电的阵列：

let radioArray = [];

每次添加收音机时，您都会将其推送到该阵列：

let newRadio; // Here you define JSX or straight element with label to go into newRadio
radioArray.push(newRadio);

通过这种方式，您可以以多种方式从radioArray读取所有收音机；映射、for循环等。 只需清除阵列，即可轻松移除所有收音机：

radioArray = [];

---

例如，通过使用Array.indexOf，您甚至可以从阵列中删除特定的收音机。

您可以先删除下一个同级标签，然后删除收音机本身

if (radio.checked) {
  radio.nextSibling.remove()
  radio.remove()
}

可运行示例

放射性透射电镜的功能{ var htmlRadio=document.getElementById'radiopreview'； var optionValue=document.getElementById'txtRadioValue'； var optionDisplaytext=document.getElementById'txtRadioDisplayValue'； 如果optionValue.value=={ 警告“请输入选项值”； optionValue.focus； 返回false； } 如果选项DisplayText.value=={ 警报“请输入选项显示文本”； optionDisplaytext.focus； 返回false； } var radiobox=document.createElementinput； radiobox.type='radio'； radiobox.value=optionDisplaytext.value； radiobox.id=optionValue.value； radiobox.name='attr_radio'； var label=document.createElement'label' label.htmlFor=optionDisplaytext.value； 变量说明=document.createTextNodeoptionDisplaytext.value； 标签.附加说明； var container=document.getElementById'radiopreview'； 集装箱、集装箱、集装箱； 容器标签； alertOption已成功添加； optionValue.value=； optionDisplaytext.value=； } 函数删除程序{ var radios=document.getElementsByNameattr\u radio； 对于变量i=0；i以上所有答案都是正确的，但我也有自己的实现

放射性透射电镜的功能{ var htmlRadio=document.getElementByIdradiopreview； var optionValue=document.getElementByIdtxtRadioValue； var optionDisplaytext=document.getElementByIdtxtRadioDisplayValue； 如果optionValue.value=={ 请输入选项值； optionValue.focus； 返回false； } 如果选项DisplayText.value=={ 警报请输入选项显示文本； optionDisplaytext.focus； 返回false； } var radiobox=document.createElementinput； radiobox.type=收音机； radiobox.value=optionDisplaytext.value； radiobox.id=optionValue.value； radiobox.name=attr_radio； var label=document.createElementlabel； label.htm lFor=optionDisplaytext.value； 变量说明=document.createTextNodeoptionDisplaytext.value； 标签.附加说明； var container=document.getElementByIdradiopreview； 集装箱、集装箱、集装箱； 容器标签； alertOption已成功添加； optionValue.value=； optionDisplaytext.value=； } 函数删除程序{ var radios=document.getElementsByNameattr\u radio； 对于变量i=0；i当然，但你必须真正确定你想删除下一个sibling。我喜欢你的想法，但我对直接DOM操作总是有点迟疑。