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

Question

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

Ivin Raj · Answer 1 · 2015-09-08T10:38:11.953

2

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.

edited Sep 08 '15 at 10:38

answered Sep 08 '15 at 10:26

Ivin Raj

3,448
2
28
65

this is amazing, i shall check it works now :) thanks – thatOneGuy Sep 08 '15 at 10:26
it"s ok sir @thisOneGuy – Ivin Raj Sep 08 '15 at 10:27
am i able to select multiple elements to keep in view ? Like $("#canvasParent, #canvasChild").siblings().hide(); doesnt seem to work :/ – thatOneGuy Sep 08 '15 at 10:29
See this link: http://stackoverflow.com/questions/1535331/how-to-hide-all-elements-except-one-using-jquery – Ivin Raj Sep 08 '15 at 10:32
1

This answer is wrong. It's about the children of the selected element, not the siblings. – LaVomit Sep 08 '15 at 10:37
ya wait sir i check it – Ivin Raj Sep 08 '15 at 10:37

score 2 · Answer 2 · answered Sep 08 '15 at 10:30

2

This should work as requested.

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

Here is a fiddle, specially for you!

Good luck.

answered Sep 08 '15 at 10:30

LaVomit

492
5
15

you are amazing haha this works great. However, ive forgot to mention the way mine is set out. The canvasParent&canvasChild are grandchildren not children of the svgContainer. Are you able to amend this updated fiddle ? http://jsfiddle.net/o9zowx3b/1/ You can see it hides everything :( – thatOneGuy Sep 08 '15 at 10:39

Sandeep · Answer 3 · 2015-09-08T10:34:59.857

1

This will select all children except the 2 children.

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

edited Sep 08 '15 at 10:34

answered Sep 08 '15 at 10:29

Sandeep

819
10
16

score 1 · Accepted Answer · answered Sep 08 '15 at 10:35

1

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>

answered Sep 08 '15 at 10:35

dfsq

191,768
25
236
258

I have mentioned this in another comment but not in the question.Both canvasParent & canvasChild are granchildren of the svgContainer. So none of these methods are working. I've updated a fiddle @LaVomit created. http://jsfiddle.net/o9zowx3b/1/ in this it has the same layout as my problem. Appreciate it if you can take a look :) – thatOneGuy Sep 08 '15 at 10:41
1

Then selector will be like this: `$("#svgContainer > #svg > :not(#canvasParent,#canvasChild,#showMe)").hide();`. Demo: http://jsfiddle.net/o9zowx3b/2/ – dfsq Sep 08 '15 at 10:43

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

4 Answers4