thatOneGuy
thatOneGuy

Reputation: 10612

How to hide all but one child(grandchild) of element in dom

I have a container for all my elements and I hide all of its children like so :

$("#svgContainer").children().hide();

I have two elements that are the 'SVGContainer''s grandchildren :

#canvasParent & #canvasChild.

I have tried doing this :

$("#svgContainer").children().hide();
        $("#canvasParent").show();
        $("#canvasChild").show();

This doesn't seem to work, probably because the display:none; gets given to the parent not the child.

How do I go about hiding every one of the SVGContainers children except for the elements with id's : #canvasParent & #canvasChild.

Here's a fiddle of the layout I have : http://jsfiddle.net/o9zowx3b/1/

Notice it hides all elements still, I think this is due to them being grandchildren not children of the svgContainer

Upvotes: 1

Views: 993

Answers (4)

Ivin Raj
Ivin Raj

Reputation: 3429

What you're wanting to do is hide all of the siblings of a particular element. That's relatively simple with jQuery using the .siblings method:

$("#svgContainer").children().hide();​​​​

This will hide all elements on the same level, in the same parent element.

Upvotes: 2

dfsq
dfsq

Reputation: 193261

You can also do it with single selector:

$("#svgContainer > :not(#canvasParent,#canvasChild)").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgContainer">
    <div id="canvasParent">canvasParent</div>
    <div>should be hidden</div>
    <div id="canvasChild">canvasChild</div>
</div>

Upvotes: 1

Sandeep
Sandeep

Reputation: 819

This will select all children except the 2 children.

$("#svgContainer").children().not("#canvasParent,#canvasChild").hide();

Upvotes: 1

LaVomit
LaVomit

Reputation: 492

This should work as requested.

$('#svgContainer').children().not('#canvasParent').not('#canvasChild').hide();

Here is a fiddle, specially for you!

Good luck.

Upvotes: 2

Related Questions