javascript - How to use greasemonkey to selectively remove content from a website

Question

The content I am trying to modify has a series of <div> entries, and within each of these are other <div> entries. There are no id tags to help here. What I want the script to do is inspect the content of each of these <div> entries and look for some text. This will be used to determine whether the whole '' entry is deleted/hidden or not. Is this possible? How?

Below is an example. There are several of these in the page, and I want to delete/hide the ones where the text inside the <div class="foo bar"> tags say "Yes." So in this example, this whole thing would get deleted/hidden.

<div class="entry">

<div class="fooPhoto"><a href="Addfoo.jsp?tid=954102"><img class="person" src="http://static.barfoo.com/images/site/icons/dude.png" border="0" width="24" height="24" onerror="this.src='images/site/icons/dude.png'" title="Photo Unavailable" alt="Photo Unavailable" ></a></div>

<div class="fooAvg">4.7</div>     

<div class="foo bar">Yes</div>

<div class="fooShare">
<a class="shareEmail" href="referral.jsp?sid=882&tid=954102&pgid=3">Share using email</a>
</div>

</div><!-- closes entry -->

Answer 1

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 ();
    }
}