无法删除选择菜单中的元素。

Question

to keep this short and simple, I have a select menu where I am constantly appending and removing elements to a select dropdown. I looked at How do I clear all options in a dropdown box? and Remove values from select list based on condition but had no luck. I am trying to do something like this.

var select = document.getElementById('model-menu');

Now if I do...

select.options //returns an array [with a length of 24]

for (var i = 1; i <= select.options.length; i++) { 
    select.remove(i) 
}

The problem now is that... it only removed half.

select.length //12

It's really wierd. This is where it gets even wierder. If I do...

for (var i = 0; i < select.options.length; i++) {
    console.log(i) //24 23 22 21....
}

IT STOPS AT 12.

I am not looking for an exact solution to this problem, but this is some absolute nonsense that I have been dealing with for the past few hours and If someone can direct me to where this issue MIGHT be happening it will save me a lot of stress :)

Answer 1

You can try this way:

 function clearItems() { var select = document.getElementById("select1"); for(i = select.options.length - 1 ; i >= 0 ; i--){ select.remove(i); } } 

 <select id="select1"> <option value="Item A">Item A</option> <option value="Item B">Item B</option> <option value="Item C">Item C</option> <option value="Item D">Item D</option> </select> <input type="button" value="Clear Items" onclick="clearItems()" /> 

And this is why you code not works properly:

see what happens when you loop from beginning to N as:

for (var i = 0; i < select.options.length; i++) { 
  select.remove(i);
}

//initial length = 4 (0:A, 1:B, 2:C, 3:D)
//i=0  =>  remove(0)  =>  Item A will be removed
//now we have: 0:B, 1:C, 2:D  ,  length=3
//i=1  =>  remove(1)  =>  this will remove Item C (instead of Item B)
//now we have: 0:B, 1:D  ,  length=2  
//... so it will skip one item at each iteration!
//i=2  =>  (length=2) exit loop!
//... as length is decreasing at each loop 
//... and the loop stop condition will be evaluated at each iteration,
//... so we will stop at half of the loop!

//to solve this issue, we could also use this way:

var n1 = select.options.length; // cache the original length

for(i = 0 ; i < n1; i++){
  select.remove(0);
}