Question: I have a `<p>` tag that I need to hide the text in. There is also a `<span>` inside the `<p>` of which I dont want to hide this text. Is this possible to do without changing the markup using jQuery?

Fiddle: <http://jsfiddle.net/ghogdc0x/2/>

html:

```
<p class="class">
    <span>Text not to hide</span>
    <br>
    Text to hide
</p>

```

Answer: 
You can use the css visibility property:

```
$('.class').css('visibility', 'hidden');
$('.class').children().css('visibility', 'visible');

```

[Here is a working codepen](http://codepen.io/peteTalksWeb/pen/epOQOb)

And then you could make it visible again by doing:

```
$('.class').css('visibility', 'visible');

```
You can't hide text nodes. You can only remove them or wrap them with another element and hide that wrapper element.

The following code snippet hides non-span elements and removes text-nodes children.

```
$('p.class').contents().each(function() {
    var $this = $(this);
    if ( this.nodeType === 3 && $.trim(this.nodeValue) ) {
        $this.remove();
        // in case that you just want to hide the text node
        // $this.wrap('<i>').parent().hide();
   } else if ( this.nodeType === 1 && this.tagName !== 'SPAN' ) {
       $this.hide();
   }
});

```

<http://jsfiddle.net/xxpopvje/>