Javascript 需要检查innerHTML并删除父li

我正在尝试解决一个类似的问题（尝试看看我是否可以使用这里提供的解决方案，但没有）。我的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>

希望这里有人能给我指引正确的方向 谢谢 首先，返回一个非单个元素引用，因此需要迭代并处理集合中的每个元素。此外，该集合是一个非活动集合，因此您需要获取一个非活动集合-在这里，我使用了一个简单的技巧将活动集合转换为一个真实的数组，但还有其他解决方案，如使用

var els=document.questSelectorAll（'.count'）

或使用反向循环（

for（var I=els.length-1；I>=0；I-）

）

您需要删除父对象的父对象

函数removeSubcatalog（）{
var els=[].slice.call（document.getElementsByClassName（“count”）；
对于（变量i=0；i






首先，返回一个非单个元素引用，因此需要迭代并处理集合中的每个元素。此外，该集合是一个非活动集合，因此您需要获取一个非活动集合-在这里，我使用了一个简单的技巧将活动集合转换为一个真实的数组，但还有其他解决方案，如使用
var els=document.questSelectorAll（'.count'）
或使用反向循环（
for（var I=els.length-1；I>=0；I-）
）

您需要删除父对象的父对象


函数removeSubcatalog（）{
var els=[].slice.call（document.getElementsByClassName（“count”）；
对于（变量i=0；i






如果您对
JQuery
感兴趣，那么使用简单的代码就非常简单了


首先按类“计数”获取所有跨度
迭代所有跨度并检查其文本
它的文本是
（0）
，然后删除它的父级
li

JQuery代码：

  var counts = $('.count');
  $.each(counts, function(i,item){
      if($(this).text() == ' (0)'){
         $(this).parent().parent().remove();   
      }
  });

示例代码：









删除所有零
$（“#删除”）。单击（函数（）{
变量计数=$（'.count'）；
$。每个（计数、功能（i、项目）{
如果（$（this）.text（）=='（0'））{
$（this.parent（）.parent（）.remove（）；
}
});
});
如果您对
JQuery
感兴趣，那么使用简单的代码就非常简单了


首先按类“计数”获取所有跨度
迭代所有跨度并检查其文本
它的文本是
（0）
，然后删除它的父级
li

JQuery代码：

  var counts = $('.count');
  $.each(counts, function(i,item){
      if($(this).text() == ' (0)'){
         $(this).parent().parent().remove();   
      }
  });

示例代码：









删除所有零
$（“#删除”）。单击（函数（）{
变量计数=$（'.count'）；
$。每个（计数、功能（i、项目）{
如果（$（this）.text（）=='（0'））{
$（this.parent（）.parent（）.remove（）；
}
});
});
假设，以下是您尝试执行的操作（没有jQuery）：


函数removeSubcatalog（）{
//删除子类别（如果为空）：
var checkEmpty=document.getElementsByClassName（“计数”）；
/*getElementsByClassName返回一个集合，因此我们需要一个循环*/
对于（变量i=0；i




假设，以下是您尝试执行的操作（没有jQuery）：


函数removeSubcatalog（）{
//删除子类别（如果为空）：
var checkEmpty=document.getElementsByClassName（“计数”）；
/*getElementsByClassName返回一个集合，因此我们需要一个循环*/
对于（变量i=0；i




.getElementsByClassName（）
返回一个节点列表。您必须遍历元素并分别处理每个元素。
.getElementsByClassName（）
返回一个节点列表。您必须遍历元素并分别处理每个元素。
String.prototype.trim（）
是相对新的。您应该使用笨重的
替换（/\s*（（？：。\r\124;\ n）*）/s*/g，$1'）
或类似的。
String.prototype.trim（）
是相对新的。您应该使用笨重的
。替换（/\s*（？：。\r\124;\ n）*）/s*/g，$1'）
或类似的。
$（.count
这也是一种迭代具有类的所有span
count
$（“.count”）。每个（…）
这也是一种迭代具有类的所有span
count
    <script>
        function removeSubcatalog () {
            // removing subcatalogs if they are empty:

            var checkEmpty=document.getElementsByClassName("count");

            /* getElementsByClassName returns a collection, so we need a loop */
            for ( var i = 0 ; i < checkEmpty.length; i++){
                var countElem = checkEmpty[i];
                var parentLi = countElem.parentNode.parentNode; // parent is <a> and it's parent is <li>
                if (countElem.innerHTML.trim() == "(0)"){  // trimming, so that we don't have to worry about spaces
                    parentLi.remove();
                    i--; // since the array indices change as the elements gets removed
                };  
            }

        }  
    </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>
    </ol>

    <input type="button" onclick="removeSubcatalog()" value="delete"/>