Question

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>

我有这个函数可以删除具有“hello”的innerHTML的跨度的父元素

在这种情况下，我希望代码删除带有 hello 的innerHTML的所有元素

但事实证明它只在执行函数时删除一个元素

有人可以帮我吗？我不是很好xD

Answer 1

您可以使用 jquery 删除带有匹配文本的 li 我希望您能得到答案。

$('li:contains("hello")')
 .next('span').remove().end()
 .remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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>

享受我的代码;)

Answer 2

出于此类目的，使用 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 解决方案：

$('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>

Answer 3

你确定没有像这样的：

<span class="li">
    Hello
</span>

取而代之的是：

<span class="li">Hello</span>

我想到的第一件事是，如果有任何换行符或空格，那么您肯定需要在该 innerHTML 字符串上运行 .trim() 。但是，如果不是这样，我建议在某些地方使用一堆 console.log() 来查看它在 for 循环中的位置。

如何删除具有特定innerHTML的所有元素

3 个答案: