How JS correctly clears all child elements under an element

The following code , Deleting child nodes through traversal can cause problems

const userList = document.getElementById('userList');
for (let i = 0; i < userList.children.length; i++) {
    const element = userList.children[i];
    element.remove();// userList.removeChild(element);
}

It seems very intuitive .

in fact ,

call element.remove() or parentNode.removeChild(element)  After deleting this element .

Original array （HTMLCollection） The size has changed ！ 

This results in incomplete deletion of child elements .

because element.children The value of is HTMLCollection (MDN) object , Is a class array object . You can't traverse and delete the array .

So when you delete all the child elements , Each traversal HTMLCollection Delete the first value of the object .

Code

let ele;
while ((ele = userList.children.item(0))) {
    ele.remove();
}
// or 
while ((ele = userList.firstChild)) {
    ele.remove();
}

Use here HTMLCollection.item() To get the first 1 Elements . You can also use an array to get .element.children[0]

Now that you get the first element , There's a simpler way  element.firstChild. The same goes for the last element element.lastChild （ This is also the code used by many schemes on the Internet ）

firstChild / lastChild The return is Node type , Use firstElementChild 、lastElementChild Come back to Element type .

as for Node and Element What's the difference , Please search by yourself .

PS

This is why our contemporary front-end relies too much on the front-end framework for operation dom, And the original js Knowledge loopholes .