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

Imagine that I have something like the following (modified from

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

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



Here's a non-jQuery version which works in all major browsers back to IE 5, just to demonstrate how unscary life without jQuery is.



var el = document.getElementById("foo"), child = el.firstChild, nextChild;

while (child) {
    nextChild = child.nextSibling;
    if (child.nodeType == 3) {
    child = nextChild;

If you want to remove all child text nodes you can use .contents() and then .filter() to reduce the matched set to only text nodes:

$("#foo").contents().filter(function () {
     return this.nodeType === 3; 

Here's a working example.

Note: This will preserve any existing event handlers on the child elements, which answers using .html() will not do (since the elements are removed from the DOM and added back in).

Note 2: Answers in some of the linked questions show similar code to that in my answer here, but they use the nodeType constants (e.g. return this.nodeType === Node.TEXT_NODE). This is bad practice since IE below version 9 does not implement the Node property. It's safer to use the integers (which can be found in the DOM level 2 spec).


try this :


demo :


You could use this.



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.