How to hide an element in a webpage using javascript for only specified link?

Question

I am trying to hide a button from a dynamic page using the below script

  <a class="hideonClick" id="venueButton" type="button">Find venue providers</a>
<script>
document.getElementById("venueButton").onclick = function() {hideButton()};

function hideButton(){
    //get the button

                venueButton.href="http://evopia.net/?providers-category=venues&catid=123&pagenum=1&viewtype=grid-4&numberofpages=&setorderby=&setorder=";
                venueButton.style.display="none";       
    }
    window.onload = init;
</script>
</pre>

The problem is, I am using a 'href' to redirect to the given link and I want to hide this button only on the used 'href' link. Please help which method can be used.

after click on venu button you must be redirecting to some other page right? — Bhushan Kawadkar, Jul 27 '18 at 13:57
Do you want to redirect to a new url? Or do you just want to hide the link? — Tom O., Jul 27 '18 at 14:05
@tommyO I want the button to hide itself once it reaches on the href link. — Umair Rasool, Jul 28 '18 at 13:06

Tom O. · Answer 1 · 2018-07-27T14:12:28.927

0

Your question is a little confusing:

I am using a 'href' to redirect to the given link and I want to hide this button only on the used 'href' link

So it sounds to me you want to simply hide the link when click. This is the approach I would use for that:

document.getElementById("venueButton").addEventListener('click', hideButton);

function hideButton(e) {
  //this.href = "put your url here";
  console.log('commented out setting href for example');
  this.style.display = "none";
}

<a class="hideonClick" id="venueButton" type="button">Find venue providers</a>

If you are simply trying to load data into your view then you should make an AJAX request using XMLHttpRequest to fetch your data, instead of statically reloading the page by pointing href to its own url.

edited Jul 27 '18 at 14:12

answered Jul 27 '18 at 14:03

Tom O.

5,730
2
21
35

No need for ajax, he has ton of parameters, he can add one more like hideBtn=1, and he will have that parameter on next url and he can check if hideBtn is set, if true hide btn else show btn, no need to complicate :) – Armin Jul 27 '18 at 14:14
@Armin in my opinion, adding the parameters to an AJAX request and asynchronously loading data is less complicated than your approach. – Tom O. Jul 27 '18 at 14:18
Well you need to write whole function to pass one parameter, i just put it in URL, same thing, less job – Armin Jul 27 '18 at 14:20
@Armin you should add your approach as an answer with supporting code example – Tom O. Jul 27 '18 at 14:42
@tommyO You are right about AJAX approach but will it hide the button once the page is redirected to the designated link? because the link is using the same view. Thanks. – Umair Rasool Jul 28 '18 at 13:41
@Armin is there a parameter which i could use like an if statement to hide the button if user is on that link? i.e `if(view=="link"){ this.style.display=none;}` – Umair Rasool Jul 28 '18 at 13:47
You are doing this with PHP not JS, so if(!isset($_GET['hideButton']){#html code to present button;} – Armin Jul 30 '18 at 07:58

score -1 · Answer 2 · answered Jul 27 '18 at 14:03

-1

Personally, I would add a cookie on click, an hide on button if cookie.

How do I set/unset a cookie with jQuery?

answered Jul 27 '18 at 14:03

Jean-Philippe Bergeron

365
1
4
15

This is also good idea, i've got 2 downwotes for good, working idea – Armin Jul 27 '18 at 14:05

How to hide an element in a webpage using javascript for only specified link?

2 Answers2