Can we Directly remove Nodes from a NodeList?

Question

document.getElementsByTagName returned me a NodeList object.

I would like to remove some items (let's say I would like to remove the first item from the NodeList)

Is there a way to do it? (I'm aware that I could manually copy all the nodes into an array but I do not wish to do that if NodeList by itself already has functions for us to remove elements in it)

I am aware that removing items from a NodeList has No Effect on the display (and should not cause any browser-display-refresh or stuff like that, I simply do not wish that NodeList object to hold a referennce to that Node)

is there a way to do it? (Or am i forced to copy all the items in the NodeList into an array?)

Answer 1

As you can see in the specification, there is no method to remove an element from the list.

It would not make sense anyway. This NodeList is live, meaning the DOM is searched again whenever you access a certain property, e.g. the length. From MDC:

(...) The returned list lis live, meaning that it updates itself with the DOM tree automatically. (...)

So you have to copy the nodes into an array.

You can do this quite easily though by using Array methods. E.g. to copy it and directly remove the first element:

var nodes = [].slice.call(elements, 1);  

The NodeList is an array-like object. Hence we can apply array functions to it, by using call ^[docs]. [].slice is just a shorthand to get a reference to the slice ^[docs] method.

Answer 2

Just have the same use case as you.

For ES6 you can do this:

const myNodeList = ele.childNodes;

const [head, ...tail] = myNodeList;

console.log('the first item: ', head);

console.log('the remaining items: ', tail);

JavaScript ES6— The Spread Syntax (…)