Remove all the DOM elements with a specific tag name in Javascript

Question

How can I remove all the elements with a specific tag name using Javascript. For example, I did the following:

var els = document.getElementsByTagName("center");

and it returned an array of all the center elements. How may I remove all these elements?

Coming from Remove all child elements of a DOM node in JavaScript and JavaScript DOM remove element I know that I can loop through els, find the parent of each element and then remove that specific node. But is there anyother way provided by javascript. Like we can do $('center').remove() in jquery and it removes all the elements with center tag. Anything similar to that in Javascript?

http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id — Mordalthunder, Nov 18 '13 at 09:30
[Yes there is](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove) but you still have to loop. — Bergi, Nov 18 '13 at 09:31
FWIW, the jQuery `$('center').remove()` will still loop though the nodes internally. — Matt, Nov 18 '13 at 09:36
using pure javascript,if you need to remove certain tags,you will have to traverse the DOM. Traversing is not possible without looping. — HIRA THAKUR, Nov 18 '13 at 09:43

Tibos · Answer 1 · 2016-06-13T11:29:13.027

With the mention that you still loop over the elements (there is no way to avoid that), you can do this:

Array.prototype.slice.call(document.getElementsByTagName('center')).forEach(
  function(item) {
    item.remove();
    // or item.parentNode.removeChild(item); for older browsers (Edge-)
});

DEMO: http://jsbin.com/OtOyUVE/1/edit

Some notes on slice:

document.getElementsByTagName doesn't return an array, it returns a live list with a length property. That is why it is needed to first convert it into an array (Array.prototype.slice does that for any object with the length property). By doing that you eliminate the problem of the list being live (gets updated when you change the DOM) and you also get the other array functions to work (like forEach) which have a more functional syntax for looping.

This needs more upvotes. Why use `item.parentNode.removeChild` instead of `item.remove`? — GreenRaccoon23, Jun 11 '16 at 04:42
@GreenRaccoon23 The remove method is newer and not supported in older browsers. I will add it to the answer though, thanks! — Tibos, Jun 13 '16 at 11:28

score 3 · Accepted Answer · answered Nov 18 '13 at 09:42

"it returned an array of all the center elements."

Well, it returned an array-like object (a live NodeList or an HTMLCollection depending on the browser).

"How may I remove all these elements?"

You have to loop through the list removing them one at a time as you mentioned later in your question. If you find yourself doing that a lot, encapsulate the looping inside a function so that you don't have to repeat it.

"we can do $('center').remove() in jquery and it removes all the elements with center tag. Anything similar to that in Javascript?"

jQuery is a collection of JavaScript functions, so it can't do anything JavaScript can't do. jQuery's .remove() method (like most other jQuery methods) will loop internally, it just saves you having to think about it. So that comes back to what I already mentioned above, encapsulate the loop/remove code in a function so that you can use it from any part of your code.

You're welcome. More info about the list type at [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element.getElementsByTagName). — nnnnnn, Nov 18 '13 at 09:47

Remove all the DOM elements with a specific tag name in Javascript

2 Answers2