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类=＆＃34; count＆＃34; innerHTML如果它等于(0)，那么if if应该删除它所在的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，因此您需要获取非实时集合 - 这里我使用了一个简单的hack将实时集合转换为真实数组，但还有其他解决方案，例如使用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>

Answer 2

假设，以下是您尝试做的事情（没有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"/>

Answer 3

如果您对JQuery感兴趣，那么通过简单的代码来完成它就非常简单。

首先按类'count'
迭代所有范围并检查其文本
文字为(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>

需要检查innerHTML并删除parent li

3 个答案: