使用JS根据内部锚点URL文本隐藏指定post容器div

要实现隐藏所有包含href中带有/tag/hidetag/链接的.post容器，其余文章正常显示，这里提供两种实用方案：

方法一：纯CSS实现（现代浏览器适用） #

利用CSS的:has()伪类直接定位目标容器，无需JavaScript：

/* 隐藏包含指定标签链接的文章容器 */
.post:has(a[href*="/tag/hidetag/"]) {
  display: none;
}

说明：:has()伪类会检测.post内部是否存在符合a[href*="/tag/hidetag/"]条件的子链接，匹配到的容器直接被隐藏。目前主流浏览器（Chrome、Firefox 121+、Safari 15.4+）都支持该特性。

方法二：JavaScript实现（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，用JS处理更稳妥：

// 筛选所有href包含指定标签路径的链接
const targetLinks = document.querySelectorAll('a[href*="/tag/hidetag/"]');

// 遍历链接，找到对应的.post父容器并隐藏
targetLinks.forEach(link => {
  const postContainer = link.closest('.post');
  if (postContainer) {
    postContainer.style.display = 'none';
  }
});

说明：closest('.post')会向上查找当前链接最近的.post父元素，确保精准定位到要隐藏的文章容器，避免误操作其他元素。

你的HTML结构示例 #

<div class="post">
    <div>
        <div>
            <div>
                <a href="https://mysite/mypost/">Title 1</a>
            </div>
            <div>
                <div>
                    <a href="http://mysite/tag/mytag/"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="post">
    <div>
        <div>
            <div>
                <a href="https://mysite/mypost/">Title 2</a>
            </div>
            <div>
                <div>
                    <a href="http://mysite/tag/hidetag/"></a>
                </div>
            </div>
        </div>
    </div>
</div>

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