如果 href = # 则删除按钮

Question

我现在研究了更长的时间，但我没有找到我真正需要的解决方案。所以我想我要在这里问一下。

我现在正在使用 Wordpress 主题，并且有一个时间表。在此时间表中，每个活动都有 "register" 个按钮，因此您可以预订。如果活动可以预订，您必须插入 URL。如果无法预订，则使用“#”代替。但是 "Register" 按钮仍然显示两个选项，尽管您无法预订。

所以现在我正在尝试使带有“#”的按钮不可见作为 URL，但我不知道该怎么做。我猜 JS 是完成它的最佳选择？！

结构是这样的：

<div class="sc_schedule_button">
    <a href="#">Register</a>
</div>

也许你们谁能帮我找到解决办法。非常感谢 =)

Answer 1

JQuery 是一个选项吗？如果是，您可以使用此 select 或 select 所有在您的 href 中带有 # 的链接：

$("a[href*=#]")

然后你可以.hide()这些元素。

Answer 2

为此使用 querySelectorAll

var a = document.querySelectorAll("a[href='#']");
a.forEach(function(a){
 var p = a.parentNode;
 p.style.display = "none";
});

<div class="sc_schedule_button">
    <a href="#">Register</a>
</div>
<div class="sc_schedule_button">
    <a href="url">Login</a>
</div>

Answer 3

既然可以用 CSS

隐藏它，为什么还要使用 JavaScript

[href="#"] {
  display: none;
}

<a href="#sss">A</a>
<a href="#">B</a>
<a href="http://www.example.com#">C</a>

如果你想要 JavaScript

var anchors = document.querySelectorAll('[href="#"]')
anchors.forEach( function (el) {
  if(el.getAttribute('href') === '#') el.setAttribute('hidden', true)
})

<a href="#sss">A</a>
<a href="#">B</a>
<a href="http://www.example.com#">C</a>

如果您必须隐藏父级，那么您可以 select 具有 JavaScript

的父级

var anchors = document.querySelectorAll('[href="#"]')
anchors.forEach( function (el) {
  if(el.getAttribute('href') === '#') el.parentNode.setAttribute('hidden', true)
})

<div><a href="#sss">A</a></div>
<div><a href="#">B</a></div>
<div><a href="http://www.example.com#">C</a></div>

使用 CSS 隐藏父项在浏览器中尚不可用。我们需要等到主流浏览器支持 :has() 。如果是，它只是 .sc_schedule_button:has(a[href="#"]) {}

如果 href = # 则删除按钮

Remove button if a href = #

javascript

wordpress

class

themes

invisible