如何隐藏API返回HTML模板中href为空的锚点标签？

场景说明 #

从API获取的HTML模板中存在如下这类href属性为空但包含文本内容的锚点标签，需要批量隐藏：

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

方案1：纯CSS实现（静态页面首选） #

使用CSS属性选择器精准定位href为空的<a>标签，直接设置隐藏样式：

/* 全局隐藏所有href为空的a标签 */
a[href=""] {
    display: none;
}

/* 仅隐藏指定容器内的空链接（比如示例中的.hyper-btn） */
.hyper-btn a[href=""] {
    display: none;
}

优势：无需编写脚本，页面渲染时自动生效，性能最优。

方案2：JavaScript批量处理（动态加载场景适用） #

如果HTML是API请求后动态插入到页面的，可在DOM更新后执行以下脚本批量处理：

全局处理所有空链接 #

// 选中所有href为空的a标签
const emptyLinks = document.querySelectorAll('a[href=""]');
// 遍历设置隐藏样式，也可用link.remove()直接移除元素
emptyLinks.forEach(link => {
    link.style.display = 'none';
});

仅处理指定容器内的空链接 #

// 定位目标容器
const targetContainer = document.querySelector('.hyper-btn');
if (targetContainer) {
    // 选中容器内所有href为空的a标签
    const emptyLinks = targetContainer.querySelectorAll('a[href=""]');
    emptyLinks.forEach(link => link.style.display = 'none');
}

优势：灵活处理动态插入的内容，可按需选择隐藏或直接移除元素。

内容的提问来源于stack exchange，提问作者John Mack