点击按钮如何删除select元素中被选中的option选项

• getElementsByTagName 返回的是动态HTML集合，你在全局提前获取后，后续DOM变更时集合会自动更新，但你的原始代码中循环没有添加「判断当前option是否被选中」的逻辑，也没有执行删除操作，自然无法实现功能。
• 无需遍历所有option查找选中项，select元素本身自带selectedIndex属性，可以直接拿到当前选中项的下标，操作效率更高。

方案1：最简实现（无需循环） #

直接通过selectedIndex删除选中项，代码最简洁：

var select = document.getElementById('colorSelect');

function removecolor() {
  // selectedIndex为-1代表当前没有选中项，避免报错
  if (select.selectedIndex !== -1) {
    select.remove(select.selectedIndex);
  }
}

方案2：保留for循环的修正写法 #

如果你需要遍历所有option做判断再删除，注意要倒序遍历，避免动态集合长度变化导致的索引错位问题：

var select = document.getElementById('colorSelect');

function removecolor() {
  var options = select.options; // select自带options属性，无需额外查询DOM
  // 倒序遍历规避删除元素后索引偏移漏项的问题
  for (var i = options.length - 1; i >= 0; i--) {
    if (options[i].selected) {
      select.removeChild(options[i]);
    }
  }
}

HTML部分不需要修改，和你原有代码保持一致即可。

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