hide plusone button after click

I want to hide google's +1 button after the user clicks on it using jQuery; this is the code I'm using but it seems it's not functioning properly:

JS:

$(function() {
  $("#button").click(functi开发者_开发百科on()
  {
    $(".HIDE").hide();
  });

  return false;
});

HTML:

<div class="HIDE">
  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  <g:plusone size="small" class="plusone"></g:plusone>
</div>

Use the +1 tag callback parameter to fire the hide function. There's probably a better way to select the +1 button but this works for the purpose of a demo.

<g:plusone size="tall" callback="poHide"></g:plusone>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>function poHide(){ $("#___plusone_0").fadeOut(); }</script>

Demo: jsfiddle.net/Gju6T

You may want to try the HTML5 equivalent syntax:

<div class="g-plusone" data-size="standard" data-count="true"></div>

All in all, the rendered HTML will be the thing to look at.

I think this is what you need, but put it at the end of your page just above </body>

$('g\\:plusone').live('click',function (){
   $(this).remove();
});

ELSE try this...

$('iframe').contents().find('#plusone').live('click',function (){
       $(this).remove();
    });

orrr

<script>
function mycall(str){
 console.log(str);
 //$(str).hide();//???
}
</script>
<g:plusone size="small" class="plusone" callback="mycall"></g:plusone>

The button is rendered into an iframe you don't have access to. The <g:plusone> tag is replaced by JS with an iframe and you cannot observe this button via jQuery, for example with live() or bind(). You have to use the API of the button which can be found here. There you find the option "callback" you could use like this:

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
</script>
<script type="text/javascript">
// Call the API method after the page loaded
$(document).ready(function() {
   gapi.plusone.render("HIDE",
       {"size": "standard", "count": "true", "callback" : "hideTheButton"});
});
// Method to remove the element
function hideTheButton() {
   $("#HIDE").hide();
}
</script>
<div id="HIDE">
      <g:plusone></g:plusone>
</div>