CODEWITHSUNDEEP
javascriptjqueryhtmlcssbutton
Lochness
Lochness

Reputation: 7

Simpliest way how to hide button after click

I have this code (button):

<a href="https://www.google.com" target="_blank">
  <button type="button" onclick="self.close()"
     style="background:url('/url/to/image') no-repeat left top; height:48px; width:412px; border: none;">
  </button>
</a>

and I would like to hide this button after click. What is the simpliest way how to do it?

Upvotes: 0

Views: 201

Answers (6)

Lochness
Lochness

Reputation: 7

Thank you all for answers. The simpliest solutions for me were that from Giulio Bambini, Sean T and MyGeertRo :)

Upvotes: 0

Giulio Bambini
Giulio Bambini

Reputation: 4755

The word Simplest could have several shapes of solution. In my opinion the display:none is probably the faster solving as runtime.

<a href="https://www.google.com" target="_blank">
  <button type="button" onclick="javascript:this.style.display='none'"
     style="background:url('/url/to/image') no-repeat left top; height:48px; width:412px; border: none;">
  </button>
</a>

Upvotes: 0

D4V1D
D4V1D

Reputation: 5849

My way to go would be as such:

jQuery(function($) {

    $('button').on('click', function() {
        $(this).hide();
    });

});

Still not sure about what "simplest" means. To me, it is the above code: I avoid writing Javascript in the middle of the DOM, within the HTML tags. Wrapping them in <script> tags all in one place (generally right before </body>) is more conveniant.

But this is my opinion.

Upvotes: 2

Tom O.
Tom O.

Reputation: 5941

I think the easiest way would be using addEventListener to listen for a click event on the button. Your callback function will hide the element:

document.querySelector('button').addEventListener('click', e => e.target.style.display = 'none');
<button type="button">Click to hide</button>

Upvotes: 0

MyGeertRo
MyGeertRo

Reputation: 147

I would try with:

<html>
  <body>
    <button type="button" onclick="this.style.display='none';" style="height:1em;"></button>
  </body>
</html>

Upvotes: 1

Sean T
Sean T

Reputation: 2504

The simplest? That's a matter of opinion I suppose, you could just call jquery's hide()?

<a href="https://www.google.com" target="_blank">
  <button type="button" onclick="$(this).hide(); return false;"
 style="background:url('/url/to/image') no-repeat left top; height:48px; width:412px; border: none;">
  </button>
</a>

You've wrapped it in an anchor tag so you should prevent default behaviour if you want to stop that from redirecting to https://www.google.com/

Upvotes: 2

Related Questions