Javascript 删除所有空的 innerHTML 子元素

Question

ul 元素已动态加载 li a 个子元素，有时 li a 会填充空的 innerHTML。如何删除所有具有空 a 子元素的 li 元素？

Current（错误 Uncaught TypeError: Cannot read 属性 'innerHTML' 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

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

Answer 2

当您遍历列表并删除内容时，它会关闭索引。改为向后循环：

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 3

您的代码存在问题，当您删除项目时，子项实际上会减少，因此您将所有内容都向下移动了一个索引。人们通常会向后循环以阻止此错误。

Perosnally 我只会使用带有 querySelectorAll 和 forEach 循环的 empty pseudo class 选择器。

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 4

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 解决方案并不总是理想的，因为即使视觉上看起来不错，页面的语义标记可能仍处于不理想的状态。

Javascript 删除所有空的 innerHTML 子元素

Javascript remove all empty innerHTML elements children

javascript

foreach

for-loop

innerhtml

while-loop