How to use greasemonkey to selectively remove content from a website
For questions like this, post a link to the target page. Or, if that is really not possible, save the page to pastebin.com and link to that.
Anyway, the general answer to your question is not too hard with the jQuery contains() selector. Something like this will work:
// ==UserScript==
// @name _Remove annoying divs
// @include http://YOUR_SERVER/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.
/*--- Use the jQuery contains selector to find content to remove.
Beware that not all whitespace is as it appears.
*/
var badDivs = $("div div:contains('Annoying text, CASE SENSITIVE')");
badDivs.remove ();
//-- Or use badDivs.hide(); to just hide the content.
Update for the newly clarified question/code:
In your specific example, you would use this:
var badDivs = $("div.entry div.foo:contains('Yes')");
badDivs.parent ().remove ();
Update for the site specified in the comments:
Note that there is no need to search for text because the site conveniently gives the key div a class of isHot
or notHot
.
// ==UserScript==
// @name _Unless they're hot, they're not (shown).
// @include http://www.ratemyprofessors.com/SelectTeacher.jsp*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.
var badDivs = $("#ratingTable div.entry").has ("div.notHot");
badDivs.remove ();
Finally, for dynamic (AJAX driven) pages,
use MutationObserver
or waitForKeyElements
. (WaitForKeyElements also works fine on static pages.)
Here's the above script rewritten to be AJAX aware:
// ==UserScript==
// @name _Unless they're hot, they're not (shown).
// @include http://www.ratemyprofessors.com/SelectTeacher.jsp*
// @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 restore the proper sandbox.
waitForKeyElements ("#ratingTable div.entry", deleteNotHot);
function deleteNotHot (jNode) {
if (jNode.has("div.notHot").length) {
jNode.remove ();
}
}
How to use Greasemonkey to selectively remove content from a website?
That content appears to be static. So just leverage the page's jQuery like so:
// ==UserScript==
// @name _Remove sponsored content
// @match *://www.monitor.hr/*
// @grant none
// ==/UserScript==
$(".supertitle > a[href*='marketing/sponzorirana']").closest (".news").remove ();
If more of those blocks are added dynamically, use waitForKeyElements()
as shown in this answer. Something like this (untested in GM4):
// ==UserScript==
// @name _Remove sponsored content
// @match *://www.monitor.hr/*
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant none
// ==/UserScript==
waitForKeyElements (".supertitle > a[href*='marketing/sponzorirana']", removeNewsNode);
function removeNewsNode (jNode) {
jNode.closest (".news").remove ();
}
Finally, per Greasemonkey's own developers, switch to Tampermonkey or Violentmonkey. Greasemonkey 4+ has serious deficiencies.
Specific Website content removal via Greasemonkey
Actually, that first article you linked has the technique you need. Since your target page adds the offensive content using javascript, you need to use something like waitForKeyElements()
.
Note that :contains
searches for text, but the offending "this-week-in-anime" is in various node attributes. So, we look for links with it in their href
.
Here's the configuration for your target website:
// ==UserScript==
// @name _Anime News Network, remove "This Week in Anime" articles
// @match *://www.animenewsnetwork.com/*
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant none
// ==/UserScript==
//-- WARNING: Using the page's copy of jQuery. This may blow up at some point.
/* global $, waitForKeyElements */
waitForKeyElements (".thumbnail > a[href*='this-week-in-anime']", hideContainerNode);
function hideContainerNode (jNode) {
//-- jQuery closest() finds an ancestor of current node.
var containerNode = jNode.closest (".herald.box");
containerNode.hide ();
}
Greasemonkey Script Failing To Remove Element
There are many problems with that userscript, but they mostly boil down to: You need to note the error messages in the console and google the functions that are causing them.
For example:
- That's not how
getElementsByClassName
works. querySelectorAll
does not return a node.parentNode
andremoveChild
both act on a single node.
Also: the second setTimeout
does not appear to be needed. And the load
event listener is also (probably) superfluous.
Here is the script with those deficiencies corrected:
// ==UserScript==
// @name Gocomics, Strip Sidebar
// @match https://www.gocomics.com/*
// @version 2
// @grant none
// ==/UserScript==
var interval = Math.random () * 5000 + 1000;
setTimeout (killsidebar, interval);
function killsidebar () {
//-- querySelector() and querySelectorAll () are not the same.
var adSidebar = document.querySelector ('.gc-container-fluid .layout-2col-sidebar, .gc-page-header--hero .layout-2col-sidebar');
if (adSidebar) {
adSidebar.parentNode.removeChild (adSidebar);
}
}
Although, this script will probably perform better:
// ==UserScript==
// @name Gocomics, Strip Sidebar
// @match https://www.gocomics.com/*
// @version 2
// @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant GM_addStyle
// @grant GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
waitForKeyElements (
".gc-container-fluid .layout-2col-sidebar, .gc-page-header--hero .layout-2col-sidebar",
removeNode
);
function removeNode (jNode) {
jNode.remove ();
}
It uses waitForKeyElements
-- which is faster and more robust that a straight setTimeout
.
Remove a javascript function with Greasemonkey
It's not clear that update
is a global function. If it isn't then that approach won't work.
But you can override the keypress handler with:
unsafeWindow.document.onkeypress = function(){};
For a general, high-powered way to selectively block, or replace, any JS (on Firefox), use @run-at document-start
and the checkForBadJavascripts function, like so:
// ==UserScript==
// @name _Replace select javascript on a page
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @require https://gist.github.com/raw/2620135/checkForBadJavascripts.js
// @run-at document-start
// @grant GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
checkForBadJavascripts ( [
[ false,
/document\.onkeypress\s*=\s*update/,
function () {
addJS_Node (myKeypressFunction.toString() );
addJS_Node ('document.onkeypress = myKeypressFunction;');
}
]
] );
function myKeypressFunction (evt) {
/* DO WHATEVER HERE BUT USE NO GREASEMONKEY FUNCTIONS INSIDE
THIS FUNCTION.
*/
console.log ("Keypress function fired.");
}
See this answer, for more information on checkForBadJavascripts
.
Need javascript help on how to 'back-step' x location to delete a different type of tag inside the same tree
If your code only needs to run on a recent version of Firefox/Greasemonkey you can use:
var objA = document.querySelector("a[name='JustDoIT']");
objA.parentNode.parentNode.remove();
However if you need backwards compatibility to older/other browsers, you need:
var objA = document.querySelector("a[name='JustDoIT']");
var grandParent = objA.parentNode.parentNode;
grandParent.parentNode.removeChild(grandParent);
References:
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
Related Topics
How to Detect a Textbox's Content Has Changed
How to Get Current Value of Rxjs Subject or Observable
How to Split the Ng-Repeat Data with Three Columns Using Bootstrap
How to Validate Date with Format "Mm/Dd/Yyyy" in JavaScript
How to Convert a Currency String to a Double with JavaScript
How to Pass the Value (Not the Reference) of a Js Variable to a Function
Convert Base64 to Image in JavaScript/Jquery
Comparing Arrays of Objects in JavaScript
Parse Date Without Timezone JavaScript
How Does the New Operator Work in JavaScript
Settimeout and "This" in JavaScript
Script Tag in JavaScript String
How to Dodge Jquery Promises Completely When Chaining Two Async Jquery Functions
Alternation Operator Inside Square Brackets Does Not Work
How to Decode Jwt Token in JavaScript Without Using a Library
React-Router - Pass Props to Handler Component