I have a div that looks like this.

<div class="main">
    <div class="slide"></div>
    <div class="thumbs">
        Text 1
        <img src=".png"/>
        <div></div>
        <p>Text 2</p>
        <div>
            <p>Text 3</p>
            <div><p>Text 4</p></div>
        </div>
    </div>
</div>

And I want to delete all text inside the div with the class thumbs. I tried this, but unfortunately, it only delete "Text 1" and not the others.

<script>
    $(".main .thumbs").contents().filter(function () {
         return this.nodeType === 3;
    }).remove();
</script>

EDIT : I tried every single suggestion you gived to me. And most of them are working, but I stuck with haim770 solution

I have a div that looks like this.

<div class="main">
    <div class="slide"></div>
    <div class="thumbs">
        Text 1
        <img src="https://cdn1.iconfinder./data/icons/flat-business-icons/128/stack-128.png"/>
        <div></div>
        <p>Text 2</p>
        <div>
            <p>Text 3</p>
            <div><p>Text 4</p></div>
        </div>
    </div>
</div>

And I want to delete all text inside the div with the class thumbs. I tried this, but unfortunately, it only delete "Text 1" and not the others.

<script>
    $(".main .thumbs").contents().filter(function () {
         return this.nodeType === 3;
    }).remove();
</script>

EDIT : I tried every single suggestion you gived to me. And most of them are working, but I stuck with haim770 solution

• javascript
• jquery
• dom

• tack .find('p').empty() on to the end. – Kevin B Commented Apr 19, 2017 at 15:33

7 Answers 7

The problem is that contents() would only return the direct (child) nodes of each .thumb. You can either gather them all recursively, or use find('*') to fetch them:

function removeTextNodes()
{
  $(this).contents().filter(function () {
    return this.nodeType === 3;
  }).remove();
}

$(".main .thumbs").find('*').addBack().each(removeTextNodes);

See Fiddle

Assuming all you want is the image left you could do:

$(".main .thumbs").html(function(){
   return $(this).find('img');
});

Result would be:

<div class="thumbs">
   <img src="...">
</div>

delete all text inside the div

Do you want to delete ALL the text nodes (not just the immediate children) while preserving the elements?

$(".main .thumbs").find("*").addBack().contents().filter(function(){
    return this.nodeType === 3;
}).remove();

Explanation:

1. .find("*") finds all the descendant elements of .thumbs
2. .addBack() adds .thumbs to the collection (so now we have .thumbs and all its descendants)
3. .contents() gets all the nodes of the collection (so it gets ALL the nodes of .thumbs, not just the immediate children nodes)
4. You already know how to filter to only the text nodes and remove them

You can use a recursive function:

var removeTextNodes = function(el) {
    el.contents().filter(function() {
        return this.nodeType === 3;
    }).remove();

    el.contents().filter(function() {
        return this.nodeType !== 3;
    }).each(function() {
        removeTextNodes($(this));
    });
}
removeTextNodes($('#foo'));

#bar1 {
  border: 1px solid red;
  padding: 5px;
}
#bar2 {
  border: 1px solid yellow;
  padding: 5px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

JSFiddle link.

Recursive solution

function clearText(elem){
    console.log({elemt: elem})
      if(elem.firstChild && elem.firstChild.nodeType == 3) {
         elem.firstChild.nodeValue = '';
      } 
      
      if(elem.children.length) {
 					 $.each(elem.children, function(){
      				 clearText(this); 
           });
      }
      
			
}

clearText($(".main .thumbs")[0])

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="slide"></div>
    <div class="thumbs">
        Text 1
        <img src="https://cdn1.iconfinder./data/icons/flat-business-icons/128/stack-128.png"/>
        <div></div>
        <p>Text 2</p>
        <div>
            <p>Text 3</p>
            <div><p>Text 4</p></div>
        </div>
    </div>
</div>

You can use following code to remove all child elements text too:

$(".thumbs, .thumbs *")
    .contents()
    .filter(function(){
        return this.nodeType === 3;
    })
    .remove();

In any modern browser you can use the following POJS.

See Document.querySelector

IE8+

See TreeWalker API and Document.createTreeWalker

IE9+

var firstThumbs = document.querySelector('.thumbs');
var treeWalker = document.createTreeWalker(firstThumbs, NodeFilter.SHOW_TEXT, {
  acceptNode: function(node) {
    return NodeFilter.FILTER_ACCEPT;
  }
}, false);

setTimeout(function() {
  while (treeWalker.nextNode()) {
    treeWalker.currentNode.textContent = '';
  }
}, 3000);

<div class="main">
  <div class="slide"></div>
  <div class="thumbs">
    Text 1
    <img src="https://cdn1.iconfinder./data/icons/flat-business-icons/128/stack-128.png" />
    <div></div>
    <p>Text 2</p>
    <div>
      <p>Text 3</p>
      <div>
        <p>Text 4</p>
      </div>
    </div>
  </div>
</div>

Or yet another jQuery solution.

setTimeout(function() {
  $('.thumbs')
    .first()
    .find('*')
    .addBack()
    .contents()
    .filter(function(index, node) {
      return node.nodeType == 3;
    })
    .remove();
}, 3000);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="slide"></div>
  <div class="thumbs">
    Text 1
    <img src="https://cdn1.iconfinder./data/icons/flat-business-icons/128/stack-128.png" />
    <div></div>
    <p>Text 2</p>
    <div>
      <p>Text 3</p>
      <div>
        <p>Text 4</p>
      </div>
    </div>
  </div>
</div>

I used jQuery 2 which is IE9+