Live collection strange behavior?

Question

Why li element are still in the live collection, event though they are not in the DOM?

 'use strict'; let lis = document.body.firstElementChild.getElementsByClassName('li'); document.body.firstElementChild.remove(); console.log( lis.length ); 

 <ul> <li class="li"></li> <li class="li"></li> <li class="li"></li> </ul> 

Answer 1

The collection is of descendants of the document.body.firstElementChild , so even if that element doesn't exist in the DOM anymore, the element still exists , and has children that match that class name.

To break the connection, you would have to remove the .li s from the ul . (Removing the ul from the document doesn't break the connection between the ul and its li s)

 const lis = document.body.firstElementChild.getElementsByClassName('li'); document.querySelector('li').remove(); console.log(lis.length); 

 <ul> <li class="li"></li> <li class="li"></li> <li class="li"></li> </ul>