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 va

Solution 1:

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