<div id="life">
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
  <span class="active"></span>
</div>

<br><br>
<button id="btn">Do damage</button>

body {
  display: flex;
  gap: 2rem;
  align-items:start;
}
#life {
  width: 40px;
  display:flex;
  flex-direction: column;
  gap: 2px;
}
#life span {
  display: block;
  height: 10px;
  background: green;
  opacity: 0.3;
}
#life span.active {
  opacity: 1;
  background: lime;
}

const btn = document.getElementById('btn');
const life =  document.getElementById('life');


btn.addEventListener('click', () => {
  const item = life.querySelector('span.active');
  if (item) {
    item.classList.remove('active');
  }
});