0

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!

lollercoaster
  • 15,969
  • 35
  • 115
  • 173
  • 2
    If you don't want jQuery answers you should probably remove it from the question tags. – Julian Go May 12 '13 at 04:33
  • actually, I'm not sure if I do or don't. I'll make that part of what I'm asking. but thanks - good point. – lollercoaster May 12 '13 at 04:36
  • 1
    Define "phrase". Is it a straight sentence? or could it be broken down into sibling/descendant elements like `this is the phrase`? It could look like a phrase in appearance, but the structure could not be linear at all. – Joseph May 12 '13 at 04:42
  • ah yes good question. I'm not sure how one would handle it if the phrase were broken up into multiple tags...so I would say only string within a single tag. – lollercoaster May 12 '13 at 04:53

3 Answers3

2

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.

Community
  • 1
  • 1
Larry K
  • 47,808
  • 15
  • 87
  • 140
1

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).

Community
  • 1
  • 1
Los Frijoles
  • 4,771
  • 5
  • 30
  • 49
1

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/

Abdennour TOUMI
  • 87,526
  • 38
  • 249
  • 254