При попытке удалить опции из select всегда остается один, почему?

{amp}lt;select id="form-select"{amp}gt; {amp}lt;option{amp}gt;111{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;222{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;333{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; 

Этот 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() } 

Я знаю, что есть другие решения для достижения этой цели, но я хотел бы понять, почему это не работает так, как должно

Коллекция .options является (к сожалению) живой , поэтому итерации по элементам живой коллекции один за другим и .remove каждого из них приведут к сохранению каждого нечетного. (Например, при удалении первого элемента [0] -й элемент коллекции немедленно станет следующим элементом в коллекции — то, что раньше было [1] , станет [0] (а затем, как только вы перейдете к следующий индекс в [1] , новый элемент в позиции 0 не будет повторяться)

Вместо этого используйте document.querySelectorAll , который возвращает статическую коллекцию:

 for (const option of document.querySelectorAll('#form-select {amp}gt; option')) { option.remove(); } 
 {amp}lt;select id="form-select"{amp}gt; {amp}lt;option{amp}gt;111{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;222{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;333{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; 

Вы также можете распространяться в (статический) массив перед удалением элементов:

 for (const option of [...document.querySelector('#form-select').options]) { option.remove(); } 
 {amp}lt;select id="form-select"{amp}gt; {amp}lt;option{amp}gt;111{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;222{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;333{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; 

Другой вариант, который просто работает, потому что коллекция живая (но, вероятно, ее не следует использовать, поскольку она не интуитивно понятна):

 const { options } = document.querySelector('#form-select'); while (options.length) { options[0].remove(); } 
 {amp}lt;select id="form-select"{amp}gt; {amp}lt;option{amp}gt;111{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;222{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;333{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; 

Вы удаляете элементы из массива, когда выполняете итерацию по массиву. Так что у тебя есть:

["one","two","three"]

затем вы удаляете элемент с индексом 0, который равен «единице», оставляя вас с:

["two","three"]

затем вы удаляете элемент с индексом 1, который равен «трем», оставляя вас с:

["two"]

нет элемента с индексом 2, поэтому цикл останавливается.

Вместо этого перебираем массив в обратном порядке :

 const t = document.querySelector("#form-select") for (let i = t.options.length-1; i {amp}gt;= 0; i--) { t.removeChild(t.options[i]) } 
 {amp}lt;select id="form-select"{amp}gt; {amp}lt;option{amp}gt;111{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;222{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;333{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt;