How to hide all elements except one using jquery?

Question

I have HTML page:

<head></head>
<body>
  <div>
    <div>
      <div id="myDiv">
      </div>
    </div>
  </div>
</body>

How to hide all divs, and just have the myDiv inside the body using jquery?

Update

The page may contain some other html elements such as some tables, anchors, p, and i just want to see the myDiv element.

TM. · Accepted Answer · 2009-10-08T02:47:40.723

85

This should work:

$('div:not(#myDiv)').hide();  // hide everything that isn't #myDiv
$('#myDiv').appendTo('body');  // move #myDiv up to the body

Update:

If you want to hide EVERYTHING that, not just div elements, use this instead:

$('body > :not(#myDiv)').hide(); //hide all nodes directly under the body
$('#myDiv').appendTo('body');

Probably simpler is to wrap the entire "hideable" part of the page in a big container element, and hide that directly though.

Like so:

 <body>
     <div id="contents">
        <!-- a lot of other stuff here -->
        <div id="myDiv>
        </div>
     </div>
 </body>

Then you can just do this, which is cleaner and faster:

$('#contents').hide();
$('#myDiv').appendTo('body');

edited Oct 08 '09 at 02:47

answered Oct 08 '09 at 02:41

TM.

108,298
33
122
127

what if the page contains some other elements, not all DIVs, for example some tables, links, and i just want to show the myDiv? – Amr Elgarhy Oct 08 '09 at 02:43
4

just on the topic of efficiency, it'd be *much* quicker to run `$("*").hide(); $("#myDiv").show();` compared to `$("*:not(#myDiv)")` – nickf Oct 08 '09 at 02:53
1

@nickf good point, although I've updated to something that should be faster than both of those options: `$('body > :not(#myDiv)').hide()`. Generally there aren't too many elements that are directly under the body element. Plus, as I mention in the answer, it's even better to just skip that nonsense and go for a wrapper element. – TM. Oct 08 '09 at 02:56
@TM the problem with your solution is that you can only include one element to show. With nickf's solution you can show more elements – UdeF Jan 10 '15 at 19:51
@TM: you can use $("body > *").hide(); for better performance. – UdeF Jan 10 '15 at 20:04

score 41 · Answer 2 · answered Oct 23 '12 at 22:03

41

A nice general approach:

$('#the_id').siblings().hide()
$('#the_id').parents().siblings().hide()

Works for any element type.

answered Oct 23 '12 at 22:03

Chris Johnson

20,650
6
81
80

Do I miss something or will this approach not work for elements that are deeply nested since its not recursive?! – L. Monty Jul 01 '14 at 23:16
1

You would use `#the_id` of the element you wish to display, no matter how deeply nested. The `parents()` collection includes all ancestors (up-recursive). You can't hide the element's parents or the element itself would be hidden; and you can't hide the element's children or the element itself would have no content (for element types where that concept applies). – Chris Johnson Jul 02 '14 at 13:37
$("*").hide(); from a previous answer worked to hide but then I couldn't get the div I wanted to show. Chris Johnson's answer worked to hide all but the desired div. Could someone explain how this works? – Hugh Seagraves Mar 25 '16 at 04:16
We're pruning a tree. The content you want to show is a branch (with a few apples). The branch connects to a limb, that connects to a trunk, that connects to the root. You don't want to hide the root, trunk, or limb -- those are needed to hold up your branch. But you need to hide all neighboring branches on your limb, and all neighboring limbs on your trunk, and all neighboring trunks on your root. The two-liner I provided hides your direct siblings, and the siblings of each element as you move toward the root, but doesn't hide the parent, grandparent etc. of your element. – Chris Johnson Mar 25 '16 at 11:03
Or in 1 line : `.siblings().hide().parents().siblings().hide()` – stallingOne Jan 31 '19 at 12:44

score 8 · Answer 3 · answered Jan 18 '11 at 15:06

8

If you're objective is just to see that content and not see anything else, you can always just do this. You don't need jQuery:

document.body.innerHTML=document.getElementById('myDiv').innerHTML;

answered Jan 18 '11 at 15:06

Chad

3,159
4
33
43

score 1 · Answer 4 · answered Oct 08 '09 at 02:42

1

$("div").each(function () { $(this).toggle(!!this.id); });

Note that this will explicitly show #myDiv. If you just want to hide the other divs:

$("div:not(#myDiv)").show();

Then you can do:

$("#myDiv").appendTo("body");

answered Oct 08 '09 at 02:42

Anthony Mills

8,676
4
32
51

How to hide all elements except one using jquery?

4 Answers4

Linked