如果href =#,请删除按钮

Question

我现在正在研究更长的时间,但我找不到我真正需要的解决方案.所以我想我会问这里.

我现在正在使用Wordpress主题并且有一个时间表.在此计划中,每个事件都有"注册"按钮,因此您可以预订.如果事件能够预订,则必须插入URL.如果它无法预订,则会出现"#".但是,"注册"按钮仍然显示两个选项,但您无法预订.

所以现在我试图让按钮看不见,有一个"#"作为URL,但我不知道如何.我猜JS是最好的完成它？!

结构是这样的:

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

也许你们其中一个人可以帮我找到解决方案.非常感谢=)

Answer 1

为什么在使用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>

如果必须隐藏父级,则只需使用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="#"]) {}