How to remove a text node that's before a div? - html

Question

I have the following HTML structure:
<div id="wrapper">
<div id="some-id"></div>
"this is some texxt"
<div id="some-id-2"></div>
</div>
How can I remove the text with CSS?

Answer 1

Can't think of a very good way to do so, but
#wrapper {
font-size:0;
}
Would work.
Notice, that if the other two divs have text anywhere inside them, you will need to redefine new font-size for them, since it will be overwritten.
Not sure if this will work on every browser, but you should give it a shot.

Answer 2

#wrapper {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
It is accessible, and has much better performance than changing the font size.
More here - Replacing the -9999 font

Answer 3

Its not sexy - but it works - and I am assuming that you want the two divs, but not the text in the middle. If you can only affect the content with CSS (and not javascript / jquery) - then you could try the following. Force the background of the second div to be white and move it up by 1em using position relative / top -1em. That way it will cover over the offending text.
As I said - not sexy and I do NOT recommend using this - far better to find a way of actually modifying the content of the #wrapper div.
#some-id-2{
background:white;
display:block;
position:relative;
top:-1em}
<div id="wrapper">
<div id="some-id">text content 1</div>
"this is some texxt"
<div id="some-id-2">text content 2</div>
</div>

Answer 4

I recommended you to use jQuery code to remove the text definitely from the client side, because may be you will have some issues with some browsers.
If you decide to use jQuery you can place the following code in your page:
$(document).ready(function(){
var divContent = $("#wrapper").find("div");
$("#wrapper").html(divContent);
});
if the wrapper div can contain more HTML tags for example:
<div id="wrapper">
<div id="some-id">aaaa</div>
"this is some texxt"
<div id="some-id-2">bbbb</div>
<p>Hello world</p>
</div>
You can combine HTML tags in the find jQuery function by separate them by comma:
$(document).ready(function(){
var divContent = $("#wrapper").find("div,p");
$("#wrapper").html(divContent);
});
This is more save and clean