CSS selector issues

[fski12]

How can I write a CSS selector so as to select “Line Three” in the example HTML provided. NB I am loading this using JQuery.load from an external site beyond my control so altering the markup is NOT an option.

[http://codepen.io/fski12/pen/fkzKI](http://codepen.io/fski12/pen/fkzKI)

Basically I want “Line Three” to disappear!

[TheDoc]

With help [from here](http://stackoverflow.com/questions/8568657/wrap-stray-text-in-divs “”):

$(‘.main’).contents().each(function() {
if ( this.nodeType === Node.TEXT_NODE ) {
$(this).remove();
}
});

Codepen example: http://codepen.io/ggilmore/pen/ff8eba56cd3427e42e59c05d8477f00f

[fski12]

That’s sneaky and dishonest and deceiptful and pretty useful! It’s not really what I was after in other words. I wanted to disappear “Line Three” in the sense of making it invisible; It contains data that I want to use later in a script so I can’t just delete it. Although I can use the code you posted, or something similar, to find it when the time comes. I should have been a little less “cutsie” and a little more specific I guess… sorry.

But your post gave me info I didn’t have before; This thing is called TEXT_NODE. Now I have something to google. The result is the CSS property VISIBILITY. Once I’d spent 20 minutes getting the bloody spelling right, I got [this](http://codepen.io/fski12/pen/jbnIG)

So although you sort of slithered out of the question, I got enough info to answer it for myself. TAM

[TheDoc]

If you’d prefer to create an element that you want to use later, you can just .wrap() instead of .remove();. Like this:

$(‘.main’).contents().each(function() {
if ( this.nodeType === Node.TEXT_NODE ) {
$(this).wrap(‘<div class=”show-later” />’);
}
});

Then you can just hide that element:

.show-later {
display: none;
}

http://codepen.io/ggilmore/pen/e3a8a2ac9e0372caec9c4d914802ebbe

[Author]

Posts