CODEWITHSUNDEEP
javascriptjqueryhtml
Bluefire
Bluefire

Reputation: 14139

Hiding the text in an element with JS (not the element itself)

Is there any way to hide the text in a HTML element, and not the element itself, using JavaScript? So if one had

<span style="border: 1px solid green">Hello world!</span>

how could one hide the "Hello world!" but not the border? If there is also a simplified jQuery solution, can you include it too?

Upvotes: 0

Views: 110

Answers (5)

korko
korko

Reputation: 670

$(<mydiv>).css('color', $(<mydiv>).css('background-color')) is the only solution which does not change the DOM.

If you accept to change, you can use something like $(<mydiv>).html($('<div>'+$(<mydiv>).html())+'</div>').css({visibility: 'hidden'}))

Or something like that.

Hope this will help.

Upvotes: 1

ahren
ahren

Reputation: 16959

Yes there is. it's called .wrapInner().

$("div").wrapInner('<span class="hide" />');

DEMO: http://jsfiddle.net/9KzgJ/

Upvotes: 1

Matt Coughlin
Matt Coughlin

Reputation: 18906

If it's a block-level element, you can use text-indent:-9999px;

Upvotes: 1

Justin
Justin

Reputation: 2161

Short answer no.

Sadly, without replacing the element all together, hiding the element, or changing the element text to be blank there is no way to just hide the text...

However, you could use javascript to append an identical element.. then hide the element you want...

But aside from that option, Gordon Bell's answer is probably your best option...

Upvotes: 0

Gordon Bell
Gordon Bell

Reputation: 13633

You could just use a nested span and hide it...

<span style="border: 1px solid green"><span id="text1">Hello world!</span></span>

Upvotes: 0

Related Questions