How to Update getElementsByClassName after doing something?

if (document.querySelector(".delete-filter") !== null) {
  let dltbtn = document.getElementsByClassName("delete-filter");
  let contbtn = document.getElementsByClassName("filter-solid");
  for (let i = 0; i < dltbtn.length; i++) {
    dltbtn[i].onclick = function() {
      contbtn[i].remove();
    }
  }
}

.filter-solid {
  display: inline-block;
  border: 1px solid #faa938;
  border-radius: 2vw;
  font-size: 13px;
  padding: 5px 8px;
  color: #525666;
  margin: 4px 0;
}

.filter-solid button {
  border: none;
  background: none;
  color: #525666;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer">
<div>
  <span class="filter-solid"><span> فقط کالاهای تخفیف دار </span> <button class="delete-filter"><i class="fa fa-times"></i></button></span>
  <span class="filter-solid"><span> از <span>200,000</span> تا <span>1,200,000</span> تومان </span> <button class="delete-filter"><i class="fa fa-times"></i></button></span>
  <span class="filter-solid"><span> رنگ آبی </span> <button class="delete-filter"><i class="fa fa-times"></i></button></span>
</div>

In above code I want to remove an element after click, but the problem is when I delete elements (from left) the count of dltbtn and contbtn is not updating. I mean when I have 4 elements there is [0, 1, 2, 3] array, so when I delete first element the array should be [0, 1, 2] in order, but it will not be updated. how should I fix this?

Answer

If you use .addEventListener() instead of .onclick, and DOM traversal to find the container of the clicked button, you don’t need dltbtn, contbtn or an index.

this in the event handler assigned with .addEventListener() is the clicked element -> the button.
With .closest(".filter-solid") we travel the DOM up to the first element that matches the selector ".filter-solid" (in this case .parentNode) would do the same -> the container that should be removed.

document.querySelectorAll(".delete-filter")
  .forEach(function(btn) {
    btn.addEventListener("click", function() {
      const container = this.closest(".filter-solid");
      if (container) {
        container.remove();
      }
    });
  })

.filter-solid {
  display: inline-block;
  border: 1px solid #faa938;
  padding: 5px 8px;
  margin: 4px 0;
}

<div>
  <span class="filter-solid"><span> فقط کالاهای تخفیف دار </span> <button class="delete-filter"><i class="fa fa-times">X</i></button></span>
  <span class="filter-solid"><span> از <span>200,000</span> تا <span>1,200,000</span> تومان </span> <button class="delete-filter"><i class="fa fa-times">X</i></button></span>
  <span class="filter-solid"><span> رنگ آبی </span> <button class="delete-filter"><i class="fa fa-times">X</i></button></span>
</div>