Here i have a select element and couple of option elements.I want to delete all option elements by running a foreach loop on them.But only first two elements are getting removed.What is wrong with this code?
<!DOCTYPE html>
<html>
<body>
<p id='item'></p>
<form>
remove all from fruit list:
<br>
<select id="mySelect" size="4" class='myclass' onChange='myFunction(this.className);'>
<option id='for_apple'>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<script>
let select_item = document.getElementById('mySelect');
let options=select_item.getElementsByTagName('option');
console.log('length is : '+options.length);
Array.prototype.forEach.call(options,(elem,index,arr) => {
console.log(options.length);
select_item.removeChild(elem);
});
</script>
</body>
</html>
Here i have a select element and couple of option elements.I want to delete all option elements by running a foreach loop on them.But only first two elements are getting removed.What is wrong with this code?
<!DOCTYPE html>
<html>
<body>
<p id='item'></p>
<form>
remove all from fruit list:
<br>
<select id="mySelect" size="4" class='myclass' onChange='myFunction(this.className);'>
<option id='for_apple'>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<script>
let select_item = document.getElementById('mySelect');
let options=select_item.getElementsByTagName('option');
console.log('length is : '+options.length);
Array.prototype.forEach.call(options,(elem,index,arr) => {
console.log(options.length);
select_item.removeChild(elem);
});
</script>
</body>
</html>
-
1
My guess is that
optionsupdates live: After removing 2 elements, its length bees 4-2 == 2, so the loop just stops there. – melpomene Commented Sep 17, 2016 at 11:22 -
Just use
select_item.innerHTML = "";Or use this:while (options.length) select_item.removeChild(options[0]);– user5734311 Commented Sep 17, 2016 at 11:23
6 Answers
Reset to default 6Bit of an old post, but setting the length to 0 is a quicker option:
document.getElementById('mySelect').options.length = 0;
Nodelists are "live", so when you iterate over them, the length changes and the loop stops.
The solution is to iterate backwards
let select_item = document.getElementById('mySelect');
let options = select_item.getElementsByTagName('option');
for (var i=options.length; i--;) {
select_item.removeChild(options[i]);
}
$("#mySelect option").remove();
This will remove all options under your #mySelect tag. All of the arrays and loops are not needed.
You can use non live querySelectorAll instead
let options = document.querySelectorAll('#mySelect option');
Another option would be to convert the NodeList into an array before calling forEach on it:
[].slice.call(options).forEach((elem,index,arr) => {
console.log(options.length);
select_item.removeChild(elem);
});
Better yet, since you are already using ES2015 syntax just use the spread syntax to do it:
[...options].forEach((elem,index,arr) => {
console.log(options.length);
select_item.removeChild(elem);
});
Or Array.from
Array.from(options).forEach((elem,index,arr) => {
console.log(options.length);
select_item.removeChild(elem);
});
better used pure java script.
[...document.getElementById('elementId')].map(x=>x.remove())