How to remove text (without removing inner elements) from a parent element using jquery
===

Imagine that I have something like the following (modified from http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/)

    <div id="foo">
        first
        <div id="bar1">
            jumps over a lazy dog!
        </div>
        second
        <div id="bar2">
            another jumps over a lazy dog!
        </div>
        third
    </div>

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