Question

这里我有一个select元素和几个选项元素。我想通过在它们上运行foreach循环来删除所有选项元素。但只有前两个元素被删除。这段代码出了什么问题？

<!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>

Answer 1

Nodelists是＆＃34; live＆＃34;，所以当你迭代它们时，长度会改变并且循环停止。

解决方案是向后迭代

let select_item = document.getElementById('mySelect');
let options = select_item.getElementsByTagName('option');

for (var i=options.length; i--;) {
    select_item.removeChild(options[i]);
}

Answer 2

您可以使用非实时querySelectorAll

let options = document.querySelectorAll('#mySelect option');

Answer 3

另一个选项是convert the NodeList into an array，然后再致电forEach：

[].slice.call(options).forEach((elem,index,arr) => {
    console.log(options.length);
    select_item.removeChild(elem);
});

更好的是，由于您已经在使用ES2015语法，因此只需使用spread syntax即可：

[...options].forEach((elem,index,arr) => {
    console.log(options.length);
    select_item.removeChild(elem);
});

或Array.from

Array.from(options).forEach((elem,index,arr) => {
    console.log(options.length);
    select_item.removeChild(elem);
});

Answer 4

$("#mySelect option").remove();

这将删除您的#mySelect标记下的所有选项。不需要所有的数组和循环。

从select标签中删除所有选项

4 个答案: