html - 如果未提供目标地址且存在内部文本,则删除所有空 anchor 标记

标签 html

我从 API 服务获取 HTML 模板响应,因为有时我会获取链接,并且其 href 值为空字符串(但 insideText 有一些值), 任何人都可以帮助我,如果仅存在文本且 href 为空,如何隐藏 anchor 标记。 有时 HTML 响应会提供多个空链接,请给出隐藏所有空链接的解决方案。

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

最佳答案

隐藏 anchor 标记,请使用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 本身删除 anchor 标记,请添加以下 JavaScript

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

关于html - 如果未提供目标地址且存在内部文本,则删除所有空 anchor 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73875801/

相关文章:

html - 在单个 bootstrap 行中使用两列,如何将文本垂直居中?

javascript - 分词 css 选项无效

javascript - 更改链接上的模板单击 meteor

javascript - 创建规则以禁用表单中的某些选项

Jquery-UI 选项卡不工作

html - 如何在一个div中对齐2个div?

jquery - 视频.JS : How do I add my own custom play and pause button in the middle of the video-container?

html - 表格高度属性似乎没有任何影响

javascript - 如何在不删除网站其余部分的情况下跳转网页?

html - 无法将 html 与 angularJS 和 tinymce 绑定(bind)