how to remove all element with a specific innerHTML

function checkIfBlank() {
  let li = document.getElementsByClassName("li");
  for (var i = 0; i < li.length; i++) {
  if (li[i].innerHTML === "hello") {
    li[i].parentElement.remove();
  }
  }
}
<li>
    <span class="li">hi</span>
</li>
<li>
    <span class="li">hi</span>
</li>
<li>
    <span class="li">hi</span>
</li>
<li>
    <span class="li">hello</span>
</li>
<li>
    <span class="li">hello</span>
</li>
<li>
    <span class="li">hello</span>
</li>

i have this function that will remove parent element of the span that has innerHTML of “hello”

In this case, I expect the code to remove all elements with innerHTML of hello

but turns out it only removes one element when function is executed

can anybody help me on this? im not really good xD

Answer

For such purposes, it is safer to use Array.from(element).

function checkIfBlank() {
    let li = document.getElementsByClassName("li");
    Array.from(li).forEach(function (li_curr) {
        if (li_curr.innerHTML == "hello") {
            li_curr.parentElement.remove();
        }
    });
}

checkIfBlank();
<ul>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
</ul>

jQuery solution:

$('li:contains("hello")').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
</ul>