javascript - 需要检查innerHTML并删除父li

Question

我正在尝试解决类似的问题(尝试查看是否可以使用此处提供的解决方案 - 但不能)。我的 HTML 代码如下所示:

<ol class="browse-catalogue">
    <li>
        <a href="/baby/girls/tshirts-tops" catid="26,251820" sw="1">
            T-shirts & toppe
            <span class="count"> (3)</span>
        </a>
    </li>
    <li>
        <a href="/baby/girls/shirts-blouses" catid="26,251821" sw="1">
            Skjorter & bluser
            <span class="count"> (0)</span>
        </a>
    </li>
    <li>
        <a href="/baby/girls/jeans" catid="26,251822" sw="1">
            Jeans
            <span class="count"> (0)</span>
        </a>
    </li>
</ol>

我正在尝试编写一些JavaScript代码来检查每个span class =“count”innerHTML是否等于(0)，如果那么应该删除li它所在的容器。

这就是我的 javascript 代码的样子(但不幸的是不起作用):

function removeSubcatalog () {
    // removing subcatalogs if they are empty:

    var checkEmpty=document.getElementsByClassName("count");
    var parent=checkEmpty.parentNode;
    if (checkEmpty.innerHTML == " (0)"){
        parent.removeParentNode;
    };
}  
removeSubcatalog();

希望这里有人能引导我走向正确的方向 谢谢， 摩根斯

Answer 1

首先，getElementsByClassName()返回 html collection不是单个元素引用，因此您需要迭代并处理集合中的每个元素。该集合也是 live one ，所以你需要获得一个非实时集合 - 这里我使用了一个简单的技巧将实时集合转换为真正的数组，但还有其他解决方案，例如使用 var els = document.questSelectorAll('.count') 或使用反向循环(for(var i = els.length - 1; i>= 0; i--))。

您需要删除父级的父级

function removeSubcatalog() {
  var els = [].slice.call(document.getElementsByClassName("count"));
  for (var i = 0; i < els.length; i++) {
    var checkEmpty = els[i];
    if (checkEmpty.innerHTML.trim() == "(0)") {
      checkEmpty.parentNode.parentNode.remove();
    };
  }
}
removeSubcatalog();

<ol class="browse-catalogue">
  <li>
    <a href="/baby/girls/tshirts-tops" catid="26,251820" sw="1">
      T-shirts & toppe
      <span class="count"> (3)</span>
    </a>
  </li>
  <li>
    <a href="/baby/girls/shirts-blouses" catid="26,251821" sw="1">
      Skjorter & bluser
      <span class="count"> (0)</span>
    </a>
  </li>
  <li>
    <a href="/baby/girls/jeans" catid="26,251822" sw="1">
      Jeans
      <span class="count"> (0)</span>
    </a>
  </li>

<小时/>

但是如果您使用 jQuery，那么就很简单

$('.count:contains("(0)")').closest('li').remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol class="browse-catalogue">
  <li>
    <a href="/baby/girls/tshirts-tops" catid="26,251820" sw="1">
      T-shirts & toppe
      <span class="count"> (3)</span>
    </a>
  </li>
  <li>
    <a href="/baby/girls/shirts-blouses" catid="26,251821" sw="1">
      Skjorter & bluser
      <span class="count"> (0)</span>
    </a>
  </li>
  <li>
    <a href="/baby/girls/jeans" catid="26,251822" sw="1">
      Jeans
      <span class="count"> (0)</span>
    </a>
  </li>