javascript - How to hide certain elements using Greasemonkey?

Question

I'm looking to hide certain elements using Greasemonkey. Links like this:

<a href="earn-google-circles.php" target="_blank" );"="">View</a>

Or images like this:

<img src="http://www.somesite.org/img/icon/earn-google-circles-435912.png" alt="Circle" title="Google Circle" height="18px" width="50px">

Of course, it's a part of a larger Div, but that div can't be hidden because it would hide other things I don't want hidden.

So, is there any way to hide these elements using Greasemonkey?
(Editor's note: also applies to Tampermonkey)

Answer 1

To hide all manner of Google Circles links (or images), use a Greasemonkey/Tampermonkey script like this:

// ==UserScript==
// @name     _Hide annoying links
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements (
    "a[href*='earn-google-circles'], img[src*='earn-google-circles']",
    hideNode
);

function hideNode (jNode) {
    jNode.hide ();
}

This gets both static and AJAX-loaded instances.

See Choosing and activating the right controls on an AJAX-driven site for tips on choosing a jQuery selector.

Reference:

• jQuery selectors
• waitForKeyElements()
• jQuery hide()