Vanilla Javascript for循环从所选集合中删除html元素

Question

var overrideField = document.querySelectorAll('.form_style_override_field');

overrideField.forEach(function (e) {
   e.parentNode.parentNode.remove();
});

我正在尝试学习vanilla javascript并尝试删除由classname提取的元素。

var overrideField = document.getElementsByClassName('form_style_override_field');

  for (var i = 0; i < overrideField.length; i++)
  {
     var controlGroup = overrideField[i].parentNode.parentNode; 
     controlGroup.remove();
  }

var overrideField = document.getElementsByClassName('form_style_override_field');

for (var i = 0; i < overrideField.length; i++)
{
   var controlGroup = overrideField[i].parentNode.parentNode;
   controlGroup.remove();
}

<div class="tab-pane active show" id="general">																									  
 <div class="control-group">
  <div class="control-label">Label 1</div>
  <div class="controls">
    <span class="form_style_override_field"></span>									
    Control Group 1
  </div>
 </div>
 <div class="control-group">
  <div class="control-label">Label 2</div>
  <div class="controls">
    <span class="form_style_override_field"></span>
    Control Group 2
  </div>
 </div>
</div>

overrideField变量看到2个元素，它只会删除最后一个元素。任何人都可以帮我解决一下。

谢谢！

Answer 1

getElementsByClassName返回一个实时集合，因此当你在for循环中删除一个元素时，集合（和长度）会发生变化，所以你的循环永远不会到达最后一个元素。使用querySelectorAll来返回静态集合，然后删除元素。

例如：

var elems = document.querySelectorAll('.class-to-remove');

elems.forEach(function(elem) {
  elem.remove();
});