Vanilla Javascript for 循环从选定集合中删除 html 元素 [英] Vanilla Javascript for loop to remove html elements from selected collection

问题描述

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="control-group"><div class="control-label">标签 1</div><div class="控件"><span class="form_style_override_field"></span>控制组 1

<div class="control-group"><div class="control-label">标签 2</div><div class="控件"><span class="form_style_override_field"></span>控制组 2

overrideField 变量看到 2 个元素，它只会删除最后一个.谁能帮我弄清楚.

谢谢！

解决方案

getElementsByClassName 返回一个实时集合，因此当您删除 for 循环中的元素时，集合(和长度)会发生变化，因此您的循环永远不会到达最后一个元素.改用 querySelectorAll返回一个静态集合，然后删除元素.

例如:

var elems = document.querySelectorAll('.class-to-remove');elems.forEach(功能(元素){elem.remove();});

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

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

I am trying to learn vanilla javascript and trying to remove an element which is pulled by 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>

The overrideField variable sees 2 elements and it will only remove the last one. Can anyone help me figure it out please.

Thanks!

解决方案

getElementsByClassName returns a live collection, so when you remove an element in your for loop the collection (and length) changes so your loop never gets to the last element. Use querySelectorAll instead to return a static collection and then remove the elements.

For example:

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

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

这篇关于Vanilla Javascript for 循环从选定集合中删除 html 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！