Как удалить все элементы методом remove()?

Question

[Сергей Карбивничий]

Хочу удалить эти элементы:

var menu = document.getElementsByClassName("main-menu")
var li = menu[1].getElementsByClassName("main-menu__item")

console.log("Total items: " + li.length)

for (i=0;i<li.length;i++){
  console.log("Remove element number " + i)
	li[i].remove() 
}

Но удаляет через один элемент(скорее всего массив изменяется?):

Текстовый вариант:

<ul class="main-menu">
          <li class="main-menu__item">
      <a class="main-menu__link open" id="item_feed" href="my/feed">
        <svg class="icon_svg icon_menu_feed" viewBox="0 0 32 32">
  <use href="5f16bd12/images/sprite.svg#icon_menu_feed"></use>
</svg>
        Моя лента
      </a>
    </li>
          <li class="main-menu__item">
        <a class="main-menu__link" href="https://qna.habr.com/curator/latest">
          <svg class="icon_svg icon_menu_control_panel" viewBox="0 0 32 32">
  <use href="5f16bd12/images/sprite.svg#icon_menu_control_panel"></use>
</svg>
          Курируемые вопросы
        </a>
      </li>
              <li class="main-menu__item">
    <a class="main-menu__link " id="item_questions" href="questions">
      <svg class="icon_svg icon_menu_questions" viewBox="0 0 32 32">
  <use href="5f16bd12/images/sprite.svg#icon_menu_questions"></use>
</svg>
      Все вопросы
    </a>
  </li>
  <li class="main-menu__item">
    <a class="main-menu__link " href="tags">
      <svg class="icon_svg icon_menu_tags" viewBox="0 0 32 32">
  <use href="5f16bd12/images/sprite.svg#icon_menu_tags"></use>
</svg>
      Все теги
    </a>
  </li>
  <li class="main-menu__item">
    <a class="main-menu__link " href="users">
      <svg class="icon_svg icon_menu_users" viewBox="0 0 34 32">
  <use href="5f16bd12/images/sprite.svg#icon_menu_users"></use>
</svg>
      Пользователи
    </a>
  </li>
      <li class="main-menu__item">
      <a class="main-menu__link " href="my/tracker">
        <svg class="icon_svg icon_menu_notification" viewBox="0 0 32 32">
  <use href="5f16bd12/images/sprite.svg#icon_menu_notification"></use>
</svg>
        Уведомления
      </a>
      <a class="main-menu__notifications-settings" href="tracker/settings" title="Перейти к настройке уведомлений">
        <svg class="icon_svg icon_menu_settings_tracker" viewBox="0 0 32 32">
  <use href="5f16bd12/images/sprite.svg#icon_menu_settings_tracker"></use>
</svg>
      </a>
    </li>
    </ul>

Answer 1

[Stalker_RED]

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()

Answer 2

[twobomb]

Попробуй или

while (li.length > 0)
  li[0].remove();

или

for (i=li.length-1;i>=0;i--){
  console.log("Remove element number " + i)
  li[i].remove() 
}

Answer 3

[Сергей Соколов]

Методы getElementsByClassName(), ..byName(), ..byTagName() — возвращают «живую» коллекцию. Когда удаляете 0-й элемент, остальные тут же сдвигаются и бывший 1-м, становится 0-м, но его цикл уже не будет удалять. Теперь к удалению 1-й (бывший 2-й) — поэтому удаляются через один.

Попробуйте, например, в вашем коде изменить единственную строку и идти с конца: for (let i = li.length - 1; i >= 0; i--) {

Ещё коллекцию можно заморозить, переведя её в обычный массив:

[...menu[1].getElementsByClassName("main-menu__item")]

А вообще, чего мелочиться: удалите родительский контейнер сразу )

document.querySelectorAll('.main-menu')[1].remove()