CSS как сверстать вертикальное расположение? либо JS как правильно находить элемент в DOOM?

Question

[Anonymous_toaster]

Делаю игру на жс, но, не уходите от слова "игру", тут всего лишь верстка.
Именно: сделал вертикальный индикатор жизни, а именно, вот так

<div id="lifes">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

css

#lifes {
    position: absolute;
    top: 20px;
    left: 20px;
     z-index: 1000;
}
#lifes span {
    display: table;
    margin: 0px;
    
 
    width: 30px;
    height: 10px;
    background: url(lifed.png);
    background-size: cover;
}

и js

let lifesBlock = document.querySelector('#lifes');
let life = lifesBlock.querySelector("span");
life.remove();

В принципе, всё работает, но элементы удаляются снизу вверх, то есть индикатор исчезает начиная с низа заканчивая верхом. Как сделать наоборот, сверху вниз. UPD, оно и работает сверху вниз,но верхняя часть едет вперед

Comments

[Одиночка Айс]

Например, сделать на флексах и развернуть через column-reverse

Answer 1

[Сергей delphinpro]

Зачем удалять? Просто делайте прозрачными (opacity: 0)

Answer 2

[kosuha666]

Может быть использовать querySelectorAll('#lifes span') и удалять span по индексу первый или последний

Comments

[Anonymous_toaster]

Пробовал, не работает

Answer 3

[alexalexes]

Можно указывать нужный элемент с помощью псевдоселекторов:

let life = lifesBlock.querySelector("span:first-child");

или

let life = lifesBlock.querySelector("span:last-child");