如果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="#"]) {}

Answer 2

jQuery是一个选项吗？如果是，您可以使用此选择器在HREF中选择所有链接：

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

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

Answer 3

对此

使用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>