1

I'm looking to hide the parent of a child element but not the child element itself.

<div class="bordered">
    <div class"banner-outer">
        <span class="text">My text content</span>
    </div>
</div>

When I do something like:

$(".bordered").hide();
$(".text").show();

The inner most element .text remains hidden because of the parent. Is there a way to only show the child element?

Nostronus
  • 63
  • 1
  • 7
  • if this is a style issue, just use css classes to switch/ remove/ add style – sailingthoms Jul 01 '14 at 19:17
  • This is not possible. Maybe re-think the inner structure of the element. – Stevo Perisic Jul 01 '14 at 19:17
  • not using jquery's `hide` (which just adds `display: none` to the element's styles). if you hide the parent element, the parent element will be hidden. since the parent element *contains* the child element, the child element will be hidden too. the child element is part of the parent element. – user428517 Jul 01 '14 at 19:17
  • Can you explain the use case a bit more? It sounds like a styling issue as mentioned above. I could give an example of how to achieve your goal if I knew the requirement. Logic dictates, hiding a parent element will hide anything it contains. You could clone the child and append it after the parent and then hide the parent, but this is convoluted and a better solution probably exists. – aknatn Jul 01 '14 at 19:20
  • 1
    Maybe you are trying to hide something specific on the parent element? Maybe just the background?? There are other approaches for that... – LcSalazar Jul 01 '14 at 19:21
  • 1
    It is true, this is more of a structuring issue. I believe Chris has hit the nail on the head with his answer. I originally wasn't sure if it was possible to override the parent element's display attribute on the child. Removing the parents works for me. – Nostronus Jul 01 '14 at 19:33

2 Answers2

2

In a word, No.

But, you can do something like move the ".text" span to be a child of your ".bordered" div.

$span=$(".text").clone();
$(".text").remove();
$(".bordered").append($span);

I would also suggest using ID's rather than classes if you are going to be manipulating the DOM like this.

Chris Fremgen
  • 4,649
  • 1
  • 26
  • 26
  • Thanks, I think this is the work-around I was looking for. I wasn't sure if it was possible to do so this answers my question. – Nostronus Jul 01 '14 at 19:35
1

By definition, if you hide the parent div, the childs are also hidden.

You have to proceed in a different way.

But if you just want to cancel the "bordered" class effect, you can remove the class like that:

$(".bordered").removeClass("bordered");

You could also do a copy of the child div and append it to the document.

Nicolas Henrard
  • 843
  • 8
  • 19