title: How do I use Greasemonkey and Jquery to hide an HTML element with a certain class?
body: <p>This <a href="http://www.theguardian.com/technology/2014/feb/25/bitcoin-exchange-mtgox-offline-amid-rumours-of-theft" rel="noreferrer">news site</a> (The Guardian) has a small frame that displays in the bottom-right of the page, with code like this:</p>
  
  <pre><code>&lt;div class="initially-off social-cta-overlay"&gt;
  
      &lt;div class="social-cta-overlay-content"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I hid the internal contents of the inner <code>div</code> because they're not important. I wrote a Greasemonkey script that uses JQuery to hide this box because it appears on every page:</p>
  
  <pre><code>// ==UserScript==
  // @name        hide-guardian-ad
  // @namespace   guardian
  // @description Hides the Guardian social media frame
  // @version     1
  // @grant       none
  // ==/UserScript==
  
  // @require       http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
  
  $(".social-cta-overlay").hide()
  </code></pre>
  
  <p>I installed the script, but nothing happens and the box is still there. </p>