CODEWITHSUNDEEP
javascriptjqueryhtmlbrowser
lollercoaster
lollercoaster

Reputation: 16503

hide all divs that contain a phrase inside them

I'd like to hide (remove) all <div> that contain a certain string. Like a filter. Think of it having the functionality of a browser add-on.

Basically anything that is

  1. Within a tag within the div, or
  2. Immediately inside the div (but not a tag)

Any ideas of how to best do this efficiently? Ideally I'd like a way to have the browser respond well to this by not only hiding the div, but removing it in such a way that the page has no large blank spaces.

I'm really not super fluent in javascript, so thought I'd see if I could get some pointers here. (And is better to use straight JS or JQuery?)

thanks!

Upvotes: 0

Views: 312

Answers (3)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93203

Try my JQuery plugin searchEngine

Syntax

$(selector).searchengine(textFilter,action,caseSensitive)

For your case , invoke it as following : 

var myTxt="dfvdf...."
$('div').searchengine(myTxt,'remove',false);

If you want to remove also all <p> that contains myTxt : 

   $('div,p').searchengine(myTxt,'remove',false);

if you want to hide it instead of removing it : 

$('div').searchengine(myTxt,'hide',false);

if you want to show it after that :

  $('div').searchengine(myTxt,'show',false);

and so forth

Demo : http://jsfiddle.net/abdennour/k3x53/1/

Upvotes: 1

Los Frijoles
Los Frijoles

Reputation: 4821

Hacked together from this answer: Get all visible DIVs on a page with javascript?

This is fairly simple with jQuery, but you requested non-jquery so I will give it a quick go:

function removeDivs(withString) {
    var divs = document.getElementsByTagName("DIV");
    for(var i = 0; i < divs.length; i++) {
        div = divs[i];
        if (div.style.display != "none" && div.innerHTML.indexOf(withString) > -1) {
            div.style.display = "none";
        }
    }
}

I would note that you said "phrase inside them", but did not specify the level to which you wanted to find out that the phrase is inside. In the case of nested divs, this will hide all the divs as far up as it can go that have the phrase in their innerHTML. In other words, since innerHTML contains all the contained divs, any div containing a div that has the phrase in it will also be hidden, and so forth on up the tree.

Another note, this is not efficient at all in that it probably will end up redundantly hiding divs that don't need to be hidden.

If I were to do it, I would use jQuery and try to get something a little more efficient...it would be re-inventing the wheel not to IMHO (unless there are technical restrictions or browser restrictions that prevent jQuery from running).

Upvotes: 1

Larry K
Larry K

Reputation: 49114

First, make a plan:

  1. Find all the nodes that have the phrase. This SO Q will help.
  2. For each node you find, go up the dom tree until you find the first enclosing div to remove. See JQuery dom transversal helpers
  3. Then remove the appropriate divs. You may want to animate their removal, use jquery for that too.

Re: Use jquery? Up to you. If you want your code to work on multiple browsers then jquery will help. Your problem can be solved with or without jquery.

Good luck.

Upvotes: 2

Related Questions