How To Hide Parent Div, Keeping Inner Div Visible?

Question

Below is a simplified version of my problem. Considering the following piece of HTML:

text i do not want

Solution 1:

try this:

color: transparent;
background: transparent;

of course, that won't actually make the text non-selectable, just non-visible.

Really what you're trying to do is sort of against the box-model concept, and it'd be better if you were able to enclose the text you didn't want to see in a separate div of equal level to the one you do want to see, and then hide that other div, i.e.

<div id="div1">  
  <div id="div3" style="display:none">text i do not want</div>
  <div id="div2" style="display:block">  
    text i want to keep  
  </div>  
</div>

Solution 2:

Due to the hierarchical nature of HTML, this is a hard nut to crack. The common solution is to move one element out of the other and style them so that they appear to be nested, but I assume you cannot do that in this case.

The only solution I can think of that will nullify the parent element while keeping the child element is absolute positioning, but that will be hard if you've got dynamic heights/widths on the elements.

But try this:

Baca Juga

#div1 {
    /* You might want to set a height here appropriate for #div2 */position: relative;
    text-indent: -10000px;
}

#div2 {
    left: 0;
    position: absolute;
    text-indent: 0;
    top: 0;
}

Solution 3:

Do you want just the text to disappear or the space that the text takes up to collapse too?

If you just want the text to disappear, use

<div id="div1" style="text-indent:-9999px;">
   text i do not want
   <div id="div2" style="text-indent:0">
     text i want to keep
   </div>
</div>

Solution 4:

try this it helped me

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><htmllang="en"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title>demo</title><styletype="text/css">
* {
    margin:0;
    padding:0;
}
body {
    background: #fff;
    font-size:100&#37;;
}
#hide {
    visibility:hidden;
}
#show {
    visibility:visible
}
</style></head><body><divid="hide"> hide this text
    <divid="show"> show this text </div>
    hide this text too </div></body></html>

Solution 5:

Enclose the 'Text I do not want' in another DIV or SPAN with display:none style.

Html5 Dictionary