How to use greasemonkey to selectively remove content from a website

Question

The content I'm trying to change has a number of <div> entries, and inside each of them are other <div> entries. There are no id tags. I want the script to check the contents of each of these <div> entries and look for some text. This will be used to determine if the entire "record" is deleted / hidden or not. Is it possible? How?

The following is an example. There are several of them on the page, and I want to remove / hide those where the text in the <div class="foo bar"> tags says "Yes." So, in this example, this whole thing will be 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 such questions, send a link to the landing page. Or, if this is not possible, save the pastebin.com page and link to it.

Anyway, the general answer to your question is not too complicated with jQuery contains () a 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 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 indicated in the comments:
Please note that there is no need to search for text, because the site conveniently provides the div key to the 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 (managed AJAX) pages

use MutationObserver or waitForKeyElements . (WaitForKeyElements also works fine on static pages.)

Here the above script is rewritten as AJAX:

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