необходимо проверить 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> 

Я пытаюсь написать некоторый яваскрипта код, который проверяет каждый поверочного класс = «считать» 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

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>

Answer 2

Если вас интересует 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> 
 
     \t \t $('#remove').click(function(){ 
 
     \t \t \t var counts = $('.count'); 
 
     \t \t \t $.each(counts, function(i,item){ 
 
     \t \t \t \t if($(this).text() == ' (0)'){ 
 
     \t \t \t \t \t $(this).parent().parent().remove(); 
 
     \t \t \t \t } 
 
     \t \t \t }); 
 
     \t \t }); 
 
      </script>

Answer 3

Предполагая, следующее, что вы пытаетесь сделать (без 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"/>