使用JavaScript移除Select的Option后报错及属性异常求助

你的代码存在3个直接导致异常的核心错误：

1. 事件重复绑定：你在ctcSelect的change事件回调中，每次触发change都会遍历所有option给它们绑定新的click事件，且从未解绑旧事件。多次切换选项后，每个option上会堆叠多个click回调；删除选项后，回调闭包里留存的旧索引i会出现错位，直接导致两个option同时被设为active、点击最后一个option时引用已删除节点抛出错误。
2. 使用动态DOM集合做遍历源：document.getElementsByTagName("option")返回的是实时更新的HTMLCollection，你在遍历过程中删除DOM节点时，集合长度和索引会实时变化，非常容易出现遍历漏项、索引越界问题。
3. 状态重复维护：原生<select>元素本身已经提供了selectedIndex、value等属性标识当前选中项，你额外自定义data-active属性存选中状态，两套状态同步逻辑很容易出现不一致。

修正后的JavaScript逻辑 #

const ctcInput = document.getElementById("ctcInput");
const ctcSelect = document.getElementById("ctcSelect");
const removeButton = document.getElementById("removeButton");

ctcInput.addEventListener("keydown", (e) => {
  if (isNaN(ctcInput.value) || ctcInput.value.length !== 4) return;
  if (e.code === "Enter" || e.code === "Tab") {
    addCtc(Number(ctcInput.value));
    ctcInput.value = "";
  }
});

removeButton.addEventListener("click", () => {
  const selectedVal = ctcSelect.value;
  if (!selectedVal) return;
  rmvCtc(selectedVal);
});

ctcSelect.addEventListener("change", () => {
  // 统一重置所有option状态
  for (const opt of ctcSelect.options) {
    opt.dataset.active = "false";
  }
  // 直接给当前选中项设置active，无需给每个option单独绑click
  if (ctcSelect.selectedIndex > -1) {
    ctcSelect.options[ctcSelect.selectedIndex].dataset.active = "true";
  }
});

function addCtc(ctcNum) {
  if (ctcSelect.length > 6) return;
  // 校验重复值
  for (const opt of ctcSelect.options) {
    if (Number(opt.value) === ctcNum) return;
  }
  const newOption = new Option(String(ctcNum), ctcNum);
  newOption.dataset.active = ctcSelect.options.length === 0 ? "true" : "false";
  ctcSelect.add(newOption);
  // 首次添加选项默认选中
  if (ctcSelect.options.length === 1) {
    ctcSelect.selectedIndex = 0;
  }
}

function rmvCtc(ctcNum) {
  for (let i = 0; i < ctcSelect.options.length; i++) {
    if (ctcSelect.options[i].value === String(ctcNum)) {
      ctcSelect.remove(i);
      break; // 找到目标项删除后立刻跳出循环，避免索引错位
    }
  }
  // 删除后默认选中第一项，同步active状态
  if (ctcSelect.options.length > 0) {
    ctcSelect.selectedIndex = 0;
    for (const opt of ctcSelect.options) {
      opt.dataset.active = "false";
    }
    ctcSelect.options[0].dataset.active = "true";
  }
}

修复的HTML笔误 #

原代码中<lable>为拼写错误，需改为标准<label>标签，修正后HTML片段：

<div>
  <label for="ctcInput">Add CtC #</label>
  <input type="text" id="ctcInput" name="ctcInput" class="input_boxes">
</div>
<div>
  <label for="ctcSelect">Select Contact</label>
    <select name="ctcSelect" id="ctcSelect" class="input_boxes"></select>
</div>
<div>
  <button type="button" id="removeButton">Remove</button>
</div>

原CSS部分无需修改即可正常运行。

• 移除了change事件中重复给option绑定click的逻辑，所有active状态更新统一在change回调中处理，彻底解决事件堆叠、闭包索引错位问题
• 不再提前缓存动态的option集合，所有option操作都通过select元素自带的ctcSelect.options集合访问，删除元素时找到目标就终止遍历，避免索引越界
• 选中状态以原生select的selectedIndex为唯一可信源，data-active只做单向同步，不会出现状态不一致
• 补充了添加选项后清空输入框、删除选项后默认选中第一项的交互细节，体验更流畅

内容的提问来源于stack exchange，提问作者Justin