Question

我正在循环选择下拉选项，并希望在其值满足特定指定条件时删除选项。我使用了selectObject.removechild（选项）/option.remove（），但是这样做只有一个符合条件的选项首先删除但不会删除其他选项，因为在每次删除操作时，列表的大小会减少，因此所有选项都不会被遍历。我想要纯JavaScript解决方案（没有JQuery）。我搜索了很多，只发现了JQuery解决方案。还有其他办法吗？

var selectObject = document.getElementById("sel");
var opts = selectObject.options;
for(var i = 0; opts.length; i++){
  if(opts[i].value == val){
    opts[i].remove();
    //i also tried with: selectObject.removeChild(opts[i])
  }
}

Answer 1

使用for...of loop而不是索引，我能够让代码工作。 Here is a codepen showing it working.

var selectObject = document.getElementById("sel");
var opts = selectObject.options;
for(let opt of opts){
  if(opt.value == val){
    opt.remove();
    //i also tried with: selectObject.removeChild(opts[i])
  }
}

Answer 2

＆＃13;

var empty = function() {
    s = document.getElementById('s');
    for (var i = 0; i < s.children.length; i++) {
      o = s.children[i];
      if (o.value == 2) {
        s.removeChild(o);
        i--
      }
    }
    }

＆＃13;

<select id='s'>
 <option>1</option>
 <option>1</option>
 <option>2</option>
 <option>1</option>
 <option>1</option>
 <option>1</option>
 <option>1</option>
 <option>2</option>
 <option>1</option>
 <option>1</option>
 <option>1</option>
<select>

<button onclick = 'empty()'>empty</button>

＆＃13;

删除子节点会缩短html集合大小

2 个答案: