How do I use Greasemonkey and Jquery to hide an HTML element with a certain class?
greasemonkey, jquery
Solution
That script has 3 problems (worst first):
- The `@require` directive is outside the metadata block. This means that Greasemonkey ignores it as just an ordinary javascript comment.
- There is no `@include` or `@match` directive. This means that the script will fire on every page and iframe of every site! (Crashing some of them, and chewing up resources.)
- `@grant none` means that the script will interfere with and crash all or part of many sites.
This script works:
// ==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()
Problem
This news site (The Guardian) has a small frame that displays in the bottom-right of the page, with code like this: ``` <div class="initially-off social-cta-overlay"> <div class="social-cta-overlay-content"></div> </div> ``` I hid the internal contents of the inner `div` because they're not important. I wrote a Greasemonkey script that uses JQuery to hide this box 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 box is still there.