Javascript 删除所有空的 innerHTML 子元素

Posted 2023-05-07

【中文标题】Javascript 删除所有空的 innerHTML 子元素

【英文标题】：Javascript remove all empty innerHTML elements children

【发布时间】：2020-05-01 12:33:39

【问题描述】：

ul 元素动态加载了li a 子元素，有时li a 填充空的innerhtml。如何删除所有具有空 a 子级的 li 元素？

当前（错误 Uncaught TypeError: Cannot read property '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>

【问题讨论】：

你能告诉我们你到目前为止尝试了什么吗？

遍历所有的LI，得到innerText，使用trim()去除周围的空白，并检查它是否为空。如果是，则删除该元素。

@DavidCulbreth 更新了问题

【参考方案1】：

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

个人而言，我只会使用带有 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>

【参考方案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>

【参考方案3】：

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

【参考方案4】：

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