Javascript удалить все пустые внутренние HTML элементы потомков

Question

ul элемент, который имеет динамически загруженные li a дочерние элементы, иногда li a заполняет пустой внутренний HTML. Как удалить все элементы li с пустым дочерним элементом a?

Current (ошибки Uncaught TypeError: Невозможно прочитать свойство 'inner HTML' of null)

var stepList = document.querySelector(".parent"),
    listItems = stepList.children;
    for (var i = 0; i < listItems.length; i++) {
        if (listItems[i].firstElementChild.innerHTML === "") {
            listItems[i].remove();
        }
    }

Начиная с

<ul class="parent">
    <li>
        <a href="">One</a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href="">Two</a>
    </li>
    <li>
        <a href="">Three</a>
    </li>
</ul>

Гол

<ul class="parent">
    <li>
        <a href="">One</a>
    </li>
    <li>
        <a href="">Two</a>
    </li>
    <li>
        <a href="">Three</a>
    </li>
</ul>

Answer 1

Когда вы просматриваете список и удаляете что-либо, он сбрасывает индекс. L oop вместо этого:

let lis = document.querySelector(".parent").children

for (let i = lis.length - 1; i >= 0; i--) {
    if (lis[i].firstElementChild.innerHTML === "") {
        lis[i].remove()
    } 
}

<ul class="parent">
    <li><a href="">One</a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href="">Two</a></li>
    <li><a href="">Three</a></li>
</ul>

Answer 2

Проблема с вашим кодом заключается в том, что когда вы удаляете элементы, дети на самом деле уменьшаются, поэтому вы смещаете все на один индекс. Люди обычно л oop задом наперед, чтобы остановить эту ошибку.

Лично я бы просто использовал пустой псевдо-класс селектор с querySelectorAll и forEach l oop.

var emptyAnchors = document.querySelectorAll("li > a:empty")
emptyAnchors.forEach(function (a) {
  a.parentNode.remove()
})

<ul class="parent">
  <li>
    <a href="">One</a>
  </li>
  <li>
    <a href=""></a>
  </li>
  <li>
    <a href=""></a>
  </li>
  <li>
    <a href="">Two</a>
  </li>
  <li>
    <a href="">Three</a>
  </li>
</ul>

Answer 3

VERY CHEEKY pure- css решение: заставить теги a, а не li отображать маркеры элемента списка. Затем просто примените display: none ко всем пустым a тегам! (Их содержащие li элементы будут естественным образом сглаживаться до height: 0, поскольку они будут display: block и полностью без содержимого.)

li {
  position: relative;
  display: block;
}
a {
  position: relative;
  display: list-item;
}
a:empty {
  display: none;
}

<ul class="parent">
    <li>
        <a href="">One</a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href="">Two</a>
    </li>
    <li>
        <a href="">Three</a>
    </li>
</ul>

Обратите внимание, что решения css не всегда идеальны, потому что даже если визуально все выглядит хорошо, разметка страницы semanti c все еще может быть в нежелательном состоянии.

Answer 4

<script>
//list of all anchor elements in your HTML DOM
onload = function() {
  var anchors = document.getElementsByTagName("a");
  for(var i = 0; i < anchors.length; i++) {
    var anchor = anchors[i];
    if(anchor.innerHTML == "") {
      anchor.parentNode.removeChild(anchor); //removes the anchor
    }
  }
}
</script>

<a href="x">Something</a>
<a href="x"></a>
<a href="x">Something</a>
<a href="x">Something</a>