Home » Web » Javascript » Jquery Get Html Text Without Children Elements

Jquery Get Html Text Without Children Elements

Some time, you have a hmtl list inside an other html list or in fact any html element inside html and you want to have the text but not other html tag. How can you do?

You cannot use .html() because it will return the inner html tag. You cannot use .text() because it will return the text of the html element with the text inside inner html element.

For example:

<ul>
   <li id="step1">This is Step 1
        <ul>
             <li>This is inside Step 1</li>
        </ul>
   </li>
   <li id="step2">This is Step 2
   </li>
</ul>

If we use “step1.html()”. The output is:

This is Step 1
        <ul>
             <li>This is inside Step 1</li>
        </ul>

If we use “step1.text()”. The output is:

This is Step 1
        
             This is inside Step 1

But if you want to get only “This is Step 1” you will have to use several Jquery calls.

$("#step1").clone()    
           .children() 
           .remove()   
           .end()      
          .text();    

The clone instruction do a copy of the ul structure. It contains the whole structure with inner list. The children get everything under the step 1. This is the ul right under the step1 id. The remove take out all children. In our case, it removes only the ul under the step1 id. The end method tell Jquery to select back the initial selector which is the cloned element and get its text. Since we have removed every children, the text method will return only the text of the element.

If you like my article, think to buy my annual book, professionally edited by a proofreader. directly from me or on Amazon. I also wrote a TypeScript book called Holistic TypeScript

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.