javascript - Vanilla Javascript for 循环从选定集合中删除 html 元素

Question

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

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

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

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();
});