Removing HTMLCollection elements from the DOM

by

The problem is that paragraphs is a live list. By removing a p element, you are also changing that list. A simple fix is to iterate over the list in reverse order:

for (var i = paragraphs.length - 1; i >= 0; --i) {
  paragraphs[i].remove();
}

The alternative solution is to create a static list (non-live list). You can do this by either:

  • converting the list into an Array:

    var paragraphs =
  Array.prototype.slice.call(document.getElementsByTagName('p'), 0);

  • using document.querySelectorAll:

    var paragraphs = document.querySelectorAll('p');

You can then iterate over the list in regular order (using a for loop):

for (var i = 0; i < paragraphs.length; ++i) {
  paragraphs[i].remove();
}

or (using a for...of loop):

for (var paragraph of paragraphs) {
  paragraph.remove();
}

Note that .remove is a relatively new DOM method, and not supported in every browser. See the MDN documentation for more info.

To illustrate the problem, let’s imagine we have a node list of three elements, paragraphs = [p0, p1, p2]. Then this is what happens when you iterate over the list:

i = 0, length = 3, paragraphs[0] == p0  => paragraphs = [p1, p2]
i = 1, length = 2, paragraphs[1] == p2  => paragraphs = [p1]
i = 2, length = 1, END

So in this example, p1 is not deleted because it is skipped.

More Related Contents:

  1. How to pass arguments to addEventListener listener function?
  2. Remove all child elements of a DOM node in JavaScript
  3. Changing website favicon dynamically
  4. Dynamically set value of a file input [duplicate]
  5. What is the difference between children and childNodes in JavaScript?
  6. How to append text to a “?
  7. Difference between “change” and “input” event for an `input` element
  8. Setting innerHTML vs. setting value with Javascript
  9. What is my script src URL?
  10. javascript access parent DOM across domains?
  11. Using querySelectorAll to retrieve direct children
  12. How to add/remove a class in JavaScript?
  13. How can I get an object’s absolute position on the page in Javascript? [duplicate]
  14. jQuery: how to change tag name?
  15. Why is the loop assigning a reference of the last index element to? [duplicate]
  16. How do I put codes from jsfiddle.net into my website?
  17. JavaScript: How to get parent element by selector?
  18. Screen Scraping from a web page with a lot of Javascript [closed]
  19. What is better, appending new elements via DOM functions, or appending strings with HTML tags?
  20. Attach event listener through javascript to radio button
  21. Check whether HTML element has scrollbars
  22. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  23. Convert String to XML Document in JavaScript
  24. Why doesn’t Node.js have a native DOM?
  25. Is there a way to get innerText of only the top element (and ignore the child element’s innerText)?
  26. IE support for DOM importNode
  27. Can I add arbitrary properties to DOM objects?
  28. Is there any way to find an element in a documentFragment?
  29. In JavaScript, how can I replace text in an HTML page without affecting the tags?
  30. How do I manipulate the SVG DOM and create elements?

Leave a Comment