Проблема с удалением вариантов из select с использованием цикла JavaScript

Оффтоп javascript
1

Описание проблемы

Я пытаюсь удалить опции из выпадающего списка, основываясь на их классах, в зависимости от выбора в другом списке. Проблема заключается в том, что не все опции удаляются сразу, а некоторые остаются даже после вызова функции. В настоящее время меня нужно изменить выбор примерно 7 раз, чтобы удалить все ненужные варианты.

Код функции

function активироватьВыборКласса(типКласса) {
  let выборКласса = document.getElementById("класс");
  console.log("Количество вариантов: " + выборКласса.length);
  for (let i = 0; i < выборКласса.length; i++) {
    if (!выборКласса.options[i].classList.contains(типКласса)) {
      выборКласса.remove(i);
    }
  }
  выборКласса.disabled = false;
  выборКласса.classList.remove("disabled-select");
  let defaultOption = document.getElementById("класс-опция-по-умолчанию");
  defaultOption.innerHTML = " -- выберите класс -- ";
}

HTML структура

<select onchange="javascript:активироватьВыборКласса(this.value);" id="тип-класса" name="тип-класса" required>
  <option disabled selected value> -- выберите тип класса -- </option>
  <option value="Маг">Маг</option>
  <option value="Вор">Вор</option>
  <option value="Воин">Воин</option>
  <option value="Лучник">Лучник</option>
  <option value="Пират">Пират</option>
</select>

<select id="класс" name="класс" disabled required>
  <option class="Маг Вор Воин Лучник Пират" id="класс-опция-по-умолчанию" disabled selected></option>
  <!-- Маги -->
  <option class="Маг" value="Боевой Маг">Боевой Маг</option>
  <option class="Маг" value="Тайный Маг">Тайный Маг</option>
  <option class="Маг" value="Пламенный Маг">Пламенный Маг</option>
  <option class="Маг" value="Еван">Еван</option>
  <option class="Маг" value="Канна">Канна</option>
  <option class="Маг" value="Светлый Маг">Светлый Маг</option>
  <option class="Маг" value="Бишоп">Бишоп</option>
  <option class="Маг" value="Ледяной/Молниеносный Маг">Ледяной/Молниеносный Маг</option>
  <option class="Маг" value="Огненный/Ядовитый Маг">Огненный/Ядовитый Маг</option>
  <option class="Маг" value="Кинисис">Кинисис</option>
  <option class="Маг" value="Иллиум">Иллиум</option>
  <!-- Воры -->
  <option class="Вор" value="Двойной Клинок">Двойной Клинок</option>
  <option class="Вор" value="Ночной Дух">Ночной Дух</option>
  <option class="Вор" value="Фантом">Фантом</option>
  <option class="Вор" value="Тень">Тень</option>
  <option class="Вор" value="Ночной Лорд">Ночной Лорд</option>
  <option class="Вор" value="Ксено">Ксено</option>
  <option class="Вор" value="Кадена">Кадена</option>
  <!-- Воины -->
  <option class="Воин" value="Аран">Аран</option>
  <option class="Воин" value="Рассветный Воин">Рассветный Воин</option>
  <option class="Воин" value="Демонический Мститель">Демонический Мститель</option>
  <option class="Воин" value="Демонический Убийца">Демонический Убийца</option>
  <option class="Воин" value="Хаято">Хаято</option>
  <option class="Воин" value="Кайзер">Кайзер</option>
  <option class="Воин" value="Михиль">Михиль</option>
  <option class="Воин" value="Темный Рыцарь">Темный Рыцарь</option>
  <option class="Воин" value="Герой">Герой</option>
  <option class="Воин" value="Паладин">Паладин</option>
  <option class="Воин" value="Ноль">Ноль</option>
  <option class="Воин" value="Бластер">Бластер</option>
  <!-- Лучники -->
  <option class="Лучник" value="Стрелок">Стрелок</option>
  <option class="Лучник" value="МастерицаЛука">МастерицаЛука</option>
  <option class="Лучник" value="Дикий Охотник">Дикий Охотник</option>
  <option class="Лучник" value="Ветреный Стрелок">Ветреный Стрелок</option>
  <option class="Лучник" value="Мерседес">Мерседес</option>
  <option class="Лучник" value="Следопыт">Следопыт</option>
  <!-- Пираты -->
  <option class="Пират" value="Ангельский Бустер">Ангельский Бустер</option>
  <option class="Пират" value="Канонир">Канонир</option>
  <option class="Пират" value="Джет">Джет</option>
  <option class="Пират" value="Механик">Механик</option>
  <option class="Пират" value="Буканьер">Буканьер</option>
  <option class="Пират" value="Курсир">Курсир</option>
  <option class="Пират" value="Тень">Тень</option>
  <option class="Пират" value="Громовой Удар">Громовой Удар</option>
  <option class="Пират" value="Арк">Арк</option>
</select>

Ожидания

Когда я выбираю тип класса, то “класс” должен активироваться и показывать доступные варианты.

Реальность

Опции “класса” удаляются как будто случайно за ~6 вызовов активироватьВыборКласса, прежде чем элемент пустеет.

2

у тебя классическая проблема с удалением элементов в цикле - когда ты удаляешь элемент, индексы сдвигаются и ты пропускаешь следующий элемент. лучше итерировать с конца массива, тогда индексы не будут влиять на оставшиеся элементы:

for (let i = выборКласса.length - 1; i >= 0; i--) {
  if (!выборКласса.options[i].classList.contains(типКласса)) {
    выборКласса.remove(i);
  }
}

так ты будешь удалять элементы с конца списка и индексы не собьются. у меня была аналогичная проблема когда-то, долго голову ломал пока не понял в чем дело

3

А можно вообще через querySelectorAll решить эту проблему более элегантно. Просто найти все опции которые НЕ содержат нужный класс и удалить их одним махом:

let ненужныеОпции = выборКласса.querySelectorAll(`option:not(.${типКласса})`);
ненужныеОпции.forEach(option => option.remove());

Так вообще не нужно циклы писать и с индексами мучится. Кстати, а зачем тебе именно удалять опции? Может лучше их просто скрывать через display:none?

4

Проблема в том что когда удаляешь элемент из DOM, индексы автоматически пересчитываются и цикл пропускает элементы. Можно еще проще решить - сначала собрать все элементы для удаления в массив, а потом уже их удалить:

let toRemove = [];
for (let i = 0; i < выборКласса.length; i++) {
  if (!выборКласса.options[i].classList.contains(типКласса)) {
    toRemove.push(выборКласса.options[i]);
  }
}
toRemove.forEach(option => option.remove());

Так вообще не будет проблем с индексами и код читается понятнее.