Question

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

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

我正在尝试学习普通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();
});

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

1 个答案: