How to use Greasemonkey and jQuery to hide an HTML element with a specific class?

Question

This (The Guardian) has a small frame that displays in the lower right corner of the page, with code similar to this:

<div class="initially-off social-cta-overlay">

    <div class="social-cta-overlay-content"></div>

</div>

I hid the inner contents of the inner divbecause it is not important. I wrote a Greasemonkey script that uses jQuery to hide this field because it appears on every page:

// ==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()

I installed the script but nothing happens and the field is still there.

Answer 1

That the script has 3 problems (worst of all):

• @require . , Greasemonkey javascript.
• @include @match. , script iframe ! ( .)
• @grant none , script .

script :

// ==UserScript==
// @name        hide-guardian-ad
// @include     http://www.theguardian.com/*
// @description Hides the Guardian social media frame
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==

$(".social-cta-overlay").hide()

Answer 2

:

$(document).find(".social-cta-overlay").hide();