Hide A Href link with Javascript

Question

I have the following HTML

<li class="navUser-item navUser-item--account">
     <a class="navUser-action" href="/login.php">Login</a> 
     <span class="navUser-or">or</span> // Hide this
     <a class="navUser-action" href="/login.php?action=create_account">Sign Up</a>  // Hide this
</li>

I'm trying to hide the last ahref and the span tag using Javascript. I can't seem to get this to work as expected, I have tried the following:

I was hoping I could extend this to look for a given Href and if its of such value ie create account then hide it however no such luck.

var litag = document.getElementsByClassName('navUser-item navUser-item--account'), i;

for (i = 0; i < litag.length; i += 1) {

   litag[i].style.display = 'none';
}

I then tried the following:

document.getElementsByClassName('navUser-item navUser-item--account a:nth-last-child(2)')[0].style.visibility = 'hidden';

tried finding the second a and yet didn't work, can someone shed some light into how I go about hiding the span and the last a href?

Answer 1

You can use the querySelector like this

var link = document.querySelector('a[href="/login.php?action=create_account"]');

link.style.display = 'none';

https://jsfiddle.net/mtinra/nsznwbgk/

Edit: or use querySelectorAll to select both span and a

var myEl = document.querySelectorAll('.navUser-item > span, a[href="/login.php?action=create_account"]');

for (var el of myEl){
    el.style.display = 'none';
}

Answer 2

Supposing you have only one navigation menu (I'm choosing the first element with class name navUser-item here var childnodes = mainNav[0].childNodes; ) you could do something like this:

 var mainNav = document.getElementsByClassName('navUser-item'); var childnodes = mainNav[0].childNodes; for (i = 0; i < childnodes.length; i += 1) { if (childnodes[i].className && childnodes[i].className.match('navUser-action')) { if (childnodes[i].href && childnodes[i].href.indexOf('create_account') !== -1) { childnodes[i].style.display = 'none'; } } else if (childnodes[i].className && childnodes[i].className.match('navUser-or')) { childnodes[i].style.display = 'none'; } } 

 <li class="navUser-item navUser-item--account"> <a class="navUser-action" href="/login.php">Login</a> <span class="navUser-or">or</span> <a class="navUser-action" href="/login.php?action=create_account">Sign Up</a> </li> 

Answer 3

I generally find it better to change classes and use CSS for toggling display of items.

 var links = document.getElementById('link-list').children; for (var i = 0; i < links.length; i++) { if (links[i].className.match(/(?:^|\\s)navUser-register(?!\\S)/)) { console.log(links[i]); links[i].className = links[i].className.match(/show/) ? links[i].className.replace(/show/, 'hide') : links[i].className.replace(/hide/, 'show'); } } 

 .hide { display: none; } .show { display: inline-block; } 

 <li id="link-list" class="navUser-item navUser-item--account"> <a class="navUser-action" href="/login.php">Login</a> <span class="navUser-or navUser-register show">or</span> <a class="navUser-action navUser-register show" href="/login.php?action=create_account">Sign Up</a> </li> 

EDIT: You could also surround desired elements in a div tag and set it's display property depending on the current page. In my opinion this would be the easiest way. <div id="register-page" class="show"> ... elements ... </div> And your JavaScript part would include just a search for element by this ID and toggling it's class from show to hide. var div = document.getElementById('register-page') div.className.match(/show/) ? div.className.replace(/show/, 'hide') : div.replace(/hide/, 'show');