javascript - 使用 "for .. of"循环从 Vanilla JavaScript 中的 Select 标签中删除选项

Question

当尝试从 select 中删除选项时，总是剩下一个选项，为什么？

<select id="form-select">   
<option>111</option>
<option>222</option>
<option>333</option>
</select>

这个 JS 不起作用:

var t = document.querySelector('#form-select'); 
for(var i of t.options) {
      t.remove(i.index)
    }

这也不起作用:

for(var i of document.querySelector('#form-select').options) {
  i.remove()
}

我知道还有其他解决方案可以实现这一目标，但我想了解为什么它没有按预期工作

Answer 1

.options 集合(不幸的是)处于事件状态，因此需要逐一迭代事件集合的项目并.remove每一项都会导致每一个奇数都被保留。 (例如，当您删除第一个项目时，集合中的第 [0] 项目将立即成为集合中的下一个项目 - 以前是[1] 将变为 [0] (然后一旦您转到 [1] 处的下一个索引，新 位置 0 处的项目不会被迭代)

使用 document.querySelectorAll 代替，它返回一个静态集合:

for (const option of document.querySelectorAll('#form-select > option')) {
  option.remove();
}

<select id="form-select">
  <option>111</option>
  <option>222</option>
  <option>333</option>
</select>

您还可以在删除元素之前扩展到(静态)数组::

for (const option of [...document.querySelector('#form-select').options]) {
  option.remove();
}

<select id="form-select">
  <option>111</option>
  <option>222</option>
  <option>333</option>
</select>

另一个选项恰好可以工作，因为集合是实时的(但可能不应该使用，因为它不直观):

const { options } = document.querySelector('#form-select');
while (options.length) {
  options[0].remove();
}

<select id="form-select">
  <option>111</option>
  <option>222</option>
  <option>333</option>
</select>