Search code examples
javascriptwordpressclassthemesinvisible

Remove button if a href = #

I'm researching for a longer time now but I don't find the solution I really need. So I thought I'm going to ask here.

I'm working with a Wordpress theme right now and there's a schedule. Within this schedule there are "register" buttons for every event, so you can book it. If the event is able to book you have to insert an URL. If it is not able to book there's a "#" instead. But the "Register" button is still showing for both options although you can't book it.

So now I'm trying to make the buttons invisible that have a "#" as an URL, but I have no clue how. I guess JS would be the best to make it done?!

The structure is like that:

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

Maybe one of you can help me to find a solution. Thanks a lot =)

Solution

  • Why use JavaScript when you can hide it with CSS

    [href="#"] {
  display: none;
}
    <a href="#sss">A</a>
<a href="#">B</a>
<a href="http://www.example.com#">C</a>

    If you want it with 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>

    If you have to hide the parent, than you can just select the parent with the 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>

    Hiding the parent with CSS is not available yet in browsers. We need to wait until :has() is supported in the major browsers. When it is, it would just be .sc_schedule_button:has(a[href="#"]) {}