Question

I have a structure like the following:

<form>
    <input type="text" />
    <input type="text" />
    ...
    <input type="radio" />
    <input type="whatever" />
    Here I have some text
</form>

I cannot change the structure of the HTML. I need to remove via Javascript the text inside the form, and the problem is to select it, since it is not wrapped inside any tag.

My solution (more a hack actually) using jQuery is the following

$('form').contents().filter(function(){
    return (this.toString() == '[object Text]')
}).remove();

but it’s not very robust. In particular it fails on IE (all versions), where this.toString() applied to a chunk of text returns the text itself. Of course I could try

$('form').contents().filter(function(){
    return (this.toString() != '[object]')
}).remove();

but I’m looking for a better solution.

How am I supposed to remove the text?

Both a solution using jQuery or plain Javascript is good for me.

Answer 1

You filter for this.nodeType == Node.TEXT_NODE. Take a look at this answer.