How to remove text (without removing inner elements) from a parent element using jquery
<p>Imagine that I have something like the following (modified from <a href="http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/" rel="nofollow">http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/</a>)</p>

<pre><code>&lt;div id="foo"&gt;
    first
    &lt;div id="bar1"&gt;
        jumps over a lazy dog!
    &lt;/div&gt;
    second
    &lt;div id="bar2"&gt;
        another jumps over a lazy dog!
    &lt;/div&gt;
    third
&lt;/div&gt;
</code></pre>

<p>How can I remove just (only text) "first", "second" and "third" from DOM without affecting any of the child elements.  </p>
