Как удалить все элементы методом remove()?
document.queryeSelectorAll('.main-menu__item')
  .forEach(elem => elem.remove());
В консоли можно вообще так:
$$('.main-menu__item')
  .forEach(elem => elem.remove());

А вообще да, массив меняется, потому что
HTMLCollection, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.

Можете вместо этого перебирать массив с конца
for (let i=li.length;i>=0;i--) { ... }
или вообще, удалять первый элемент пока массив не опустеет
while(arr.length) arr[0].remove()
Попробуй или 
while (li.length > 0)
  li[0].remove();
или
for (i=li.length-1;i>=0;i--){
  console.log("Remove element number " + i)
  li[i].remove() 
}