11

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 -->
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
node ninja
  • 31,796
  • 59
  • 166
  • 254

1 Answers1

19

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.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 isX or notX.

// ==UserScript==
// @name     _Sample
// @include  http://example.com/SelectItem.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.notX");

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     _Sample
// @include  http://example.com/SelectItem.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", deleteNotX);

function deleteNotX (jNode) {
    if (jNode.has("div.notX").length) {
        jNode.remove ();
    }
}
miken32
  • 42,008
  • 16
  • 111
  • 154
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • Even if it did do something it looks like your example wouldn't work. It's not enough to delete the div that contains the text. The div that that div resides in also has to be deleted. – node ninja Feb 07 '12 at 02:05
  • Thanks for adding some detail to your question. See the updated answer. – Brock Adams Feb 07 '12 at 02:18
  • Actually there is a space in foobar so that it's "foo bar." What would the code be then? – node ninja Feb 07 '12 at 05:20
  • The one line would change to: `var badDivs = $("div.entry div.foo:contains('Yes')");` (all on one line) – Brock Adams Feb 07 '12 at 05:39
  • So you're saying that if the div has spaces in the class name, you just use the first word in it? I tried that, and it doesn't work. Actually the entry div is two words as well. – node ninja Feb 07 '12 at 10:12
  • A space separates multiple classes. In this case it doesn't matter much if you only use the first one. What *does* matter are the exact details of the HTML. This answer works perfectly; I tested it before I ever posted. If you want it tuned for your page, you must post the correct, exact HTML and indicate the presence of any AJAX. **LINK to the target page.** Report any errors on the JS console. Post the GM script you are using. – Brock Adams Feb 07 '12 at 11:08
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/7420/discussion-between-brock-adams-and-javascript-ninja) – Brock Adams Feb 07 '12 at 12:24
  • How would I target a text in tag `a href` in this code? `var badDivs = $("div.entry a.href:contains('something')");` does not seem to work. I am targetting this site: http://programy.sms.cz/kina/praha and specifically `
    ` and texts in `a` elements in those clasees. (i.e. remove lines with "Cinema Cinema City Letňany", for example).
     – sup May 20 '15 at 15:39
  • (In the end, `var badDiv = $("div.P_podnadpis h2:contains(" + badCinemas[i] + ")"` worked for my site, no need to mess with the `a` tag). – sup May 21 '15 at 11:49