需要检查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>

我正在尝试编写一些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();

希望这里的人可以指引我正确的方向，谢谢Mogens

假设，以下是您要尝试做的事情（没有jQuery）：

    <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"/>

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

• 首先按类“计数”获取所有范围
• 迭代所有范围并检查其文本
• 它的文本是(0)然后删除其父li

jQuery代码：

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

样例代码：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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> <button id="remove">Remove all zeros</button> <script> $('#remove').click(function(){ var counts = $('.count'); $.each(counts, function(i,item){ if($(this).text() == ' (0)'){ $(this).parent().parent().remove(); } }); }); </script>