Hide text in an element

Question

Say we have:

<div id="view-item-hero-info"> <h2>{{name}}</h2> <h4>{{location}}</h4> <h3> <span id="view-item-hero-header-score"> You scored {{userScore}}pts </span> </h3> {{description}} </div> 

Is there a way to hide text directly inside #view-item-hero-info ? I know I can use text-indent , but is there another, better way?

Note. I do not want to hide the element, just everything inside it.

Note 2: Hiding all the elements inside #view-item-hero-info is fine, I can use #view-item-hero-info > * { display: none } , but then the text inside #view-item-hero-info is still displayed. I need #view-item-hero-info to remain visible so that its background can be seen, but the text inside it must be hidden.

Answer 1

You can try:

 #view-item-hero-info { color: transparent; } 

Answer 2

Using this CSS:

 visibility: hidden; 

hides your element, but saves the space that usually takes up. While this CSS will hide the element as if it never existed:

 display: none; 

Answer 3

Use the css display property. In HTML, it will look like <span style="display: none">

Using javascript: document.getElementById("view-item-hero-header-score").style.display="none"

in css:

 #view-item-hero-header-score { display: none; } 

Answer 4

Using CSS, you can set the style:

 visibility:hidden 

So, to hide all descendants (*) inside your element:

 #view-item-hero-info * { visibility: hidden } 

If instead you only want to hide direct descendants, that is, children, but not grandchildren, then you use the direct child selector (>)

Instead of selecting all (*), you can select specific descendants, such as divs:

 #view-item-hero-info div { visibility: hidden } 

Equally, instead of visibility, you can use:

 display:none 

The display option does not take up space, whereas if you want to reserve a place for displaying an element, then use the visibility parameter

EDIT: There is no selector for node text only (i.e. Text without an element). See Is there a CSS selector for text nodes? . Therefore, all children in your range must be in the element to apply style.

As a hack, you can simply add another range directly to your main and all content (including single text). Then hiding will work.

Answer 5

Could you use JS to repeat all the children in the DOM elements and then use JS to rewrite the CSS? Sort of:

 var items_i_want = document.getElementById("view-item-hero-header-score").elements for(var i = 0; i < items_i_want .length; i++) { items_i_want [i].style.display="none" } 

Answer 6

you can use this code if you need to hide text

 .text-hidden{ font-size: 0; text-indent: -9999px; } 

to hide all direct children use

 .hidden-nested > *{ visibility: hidden; /*or next line */ display:none ; } 

if you need all the last use code for children, but change the class to

  .hidden-nested *