Удаление классов в цикле - неожиданный результат
 

<div>
		<ul>
			<li class='test'>первый</li>
			<li class='test'>второй</li>
			<li class='test'>третий</li>
			<li class='test'>четвертый</li>
			<li class='test'>пятый</li>
			<li class='test'>шестой</li>
			<li class='test'>седьмой</li>
		</ul>
	</div>

let bounceInElements = document.getElementsByClassName('test');
		const bounceInElementsLength = bounceInElements.length;
		console.log('length: '+bounceInElementsLength)
		for(let i=0; i<bounceInElementsLength;i++){
			bounceInElements[i].classList.remove('test')
			console.log('i: '+i)
			console.log(bounceInElements[i])
		}

Хочу удалить несколько классов в цикле. Результат неожиданный - удаляются только классы в нечетных индексах.
Такое чувство, будто прогулял какую-то важную лекцию по js :blink:

1) Почему так?
2) как удалить все найденные классы?

пример в кодепен:
https://codepen.io/Aleksandr_/pen/VwevoVR?editors=1011

getElementsByClassName - это живая коллекция элементов
после удаления класса изменяется сама коллекция
попробуйте

let bounceInElements = document.querySelectorAll('.test');

Да емае, точно!
Спасибо за подсказку.:thanks: