javascript 从选择标记中删除所有选项

w3nuxt5m 于 2023-01-04 发布在 Java

关注(0)|答案(6)|浏览(147)

这里我有一个select元素和两个option元素。我想通过运行foreach循环来删除所有的option元素。但是只有前两个元素被删除。这段代码有什么问题吗？

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

JavaScript

来源：https://stackoverflow.com/questions/39546133/remove-all-options-from-select-tag

6条答案

按热度按时间

mrwjdhj31#

节点列表是“活的”，所以当你迭代它们时，长度会改变，循环就会停止。
解决方案是向后迭代

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

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

赞(0）回复(0）举报 2023-01-04

w46czmvw2#

您可以改用非实时querySelectorAll

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

赞(0）回复(0）举报 2023-01-04

qrjkbowd3#

第一个月
这将删除#mySelect标签下的所有选项。所有数组和循环都不需要了。

赞(0）回复(0）举报 2023-01-04

pxiryf3j4#

另一个选项是在forEach上调用convert the NodeList into an array之前先调用convert the NodeList into an array：

[].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);
});

赞(0）回复(0）举报 2023-01-04

uxh89sit5#

最好使用纯java脚本。

[...document.getElementById('elementId')].map(x=>x.remove())

赞(0）回复(0）举报 2023-01-04

b4qexyjb6#

有点老帖子，但将长度设置为0是一个更快的选择：

document.getElementById('mySelect').options.length = 0;

赞(0）回复(0）举报 2023-01-04

我来回答

javascript 从选择标记中删除所有选项

6条答案

相关问题

热门标签

最新问答