Html 如果未提供目标地址且存在 innerText，则删除所有空锚标记

发布于09月28日

我从API服务得到了HTML模板响应，因为有时我会得到链接，而它的href值是空字符串(但innerText有一些值)，有人能帮我吗？如果只有文本而href为空，我怎么才能隐藏锚标签？有时，HTMLResponse提供多个空链接，给出隐藏所有空链接的解决方案.

<div class="hyper-btn">
    <a href="" target="_blank"> User Profile </a>
</div>

推荐答案

到hide个锚定标签，通过使用CSS将从文档中隐藏元素.

<!DOCTYPE html>
<html>
  <style>
    .hyper-btn a[href=""] {
      display: none !important; 
      /* will hide all the empty anchor tags */
    }
  </style>
  <body>
    <div class="hyper-btn">
        <a href="" target="_blank">Empty Link</a>
        <a href="someAddress" target="_blank">Link to some Address</a>
    </div>
  </body>
</html>

要从DOM本身添加remove个锚定标记，请在下面添加

<!DOCTYPE html>
<html>
<body>
    <div class="hyper-btn">
        <a href="" target="_blank">Empty Link</a>
        <a href="someAddress" target="_blank">Link to some Address</a>
    </div>

    <script>
        const linkList = document.querySelectorAll('.hyper-btn a');
        linkList.forEach(element => {
            const targetURL = element.getAttribute('href');
            if(!targetURL) {
                element.remove(); // will be removed from DOM
            }
        });
    </script>
</body>
</html>