CODEWITHSUNDEEP
javascripthtml
Frogy Diak
Frogy Diak

Reputation: 53

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

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!

Upvotes: 1

Views: 768

Answers (1)

benvc
benvc

Reputation: 15120

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

Upvotes: 5

Related Questions