使用“for..of”循环从Vanilla JavaScript中的Select标记中删除选项

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

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

这也不起作用：

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

我知道还有其他解决方案可以实现这一点，但我想了解为什么它没有按预期的那样工作。选项集合不幸处于活动状态，因此逐个迭代活动集合的项，并删除每个项将导致保留每个奇数项。例如，当您删除第一项时，集合的第[0]项将立即成为集合中的下一项-以前的[1]将变成[0]，然后一旦转到[1]处的下一个索引，位置0处的新项将不会被迭代

改为使用document.querySelectorAll，它返回一个静态集合：

用于文档的const选项。queryselector调用'form-select>option'{ 选项。删除； } 111 222 333

---

在遍历数组时，您正在从数组中删除项。所以你有：

[一，二，三]

然后删除索引0处的项，该项为1，留下：

[二，三]

接下来，删除索引1中的项目，即3，剩下：

[二]

索引2中没有项，因此循环停止

以相反的方式迭代数组：

const t=document.querySelectorform-select 对于let i=t.options.length-1；i>=0；我-{ t、 删除Childt.选项[i] } 111 222 333

---

我知道您的主要目标是了解导致这种情况发生的过程，因此这应该为您说明问题：

var arr=[1,2,3,4,5,6]； forvar i=0；iconsole.logi太高，无法从数组中获取值，因此我们完成了。剩下的是+JSON.stringifyarr+ 从数组中删除项后，将在索引更改的同一数组中循环。下面是一个示例，您可以在其中循环使用不带索引的选项，并将其从数组中删除

var selectOptions = document.querySelectorAll('#remove-option>option');
selectOptions.forEach(function(selectOption) {
  selectOption.remove();
  selectOption = null;
});

---

这里是

the.options不是一个数组，这是问题的根源，而是一个动态的HTMLCollection。如果它是一个数组，它将是静态的，不会有任何问题。@CertainPerformance在遍历数组时从数组中删除元素确实会导致我所说明的问题。@CertainPerformance HTMLOptionsCollection对象在此上下文中的行为与数组类似。

var selectOptions = document.querySelectorAll('#remove-option>option');
selectOptions.forEach(function(selectOption) {
  selectOption.remove();
  selectOption = null;
});