jQuery: Get the Text of Element without Child Element

While writing code in jQuery, I often use .text() method to get the content of any element from DOM. This function is straight forward, it strips off all the html element from a selected element and returns the remaining text. So for below element the .text() method will return “A quick brown fox”.
<div id="foo"> A quick brown fox </div> <script> $("#foo").text(); //return "A quick brown fox" </script>
Code language: HTML, XML (xml)
But by the definition the .text() returns all the text inside an element. What if you have an element which contains child elements and you want text of only the selected element ignoring all the child elements? For example: Here we have a DIV which has text “A quick brown fox” and also contain a child DIV which has text “jumps over a lazy dog!”
<div id="foo"> A quick brown fox <div id="bar"> jumps over a lazy dog! </div> </div> <script> $("#foo").text(); //return "A quick brown fox jumps over a lazy dog!" </script>
Code language: HTML, XML (xml)
What if you just want “A quick brown fox” and wants to ignore all the child element? Well, here is a simple solution using jQuery.
<script> $("#foo") .clone() //clone the element .children() //select all the children .remove() //remove all the children .end() //again go back to selected element .text(); //get the text of element </script>
Code language: JavaScript (javascript)
We clone the element that you want text of, then remove all the child elements from this cloned element and then returns the text of element. I have written a small jQuery plugin “justtext” which you can use to get the text of element and ignore all child elements. Here is the code of justtext plugin.
jQuery.fn.justtext = function() { return $(this) .clone() .children() .remove() .end() .text(); };
Code language: JavaScript (javascript)
So the usage is just by calling justtext() method on any element.
<!-- include justtext jquery plugin --> <script src="https://www.viralpatel.net/demo/jquery/get-text-without-child-element/jquery.justtext.1.0.js"></script> <div id="foo"> A quick brown fox <div id="bar"> jumps over a lazy dog! </div> </div> <script> $("#foo").justtext(); //return "A quick brown fox" </script>
Code language: HTML, XML (xml)

Online Demo

Online Demo Link

View Comments

Share
Published by
Viral Patel
Tags: How-To JQuery jquery plugin jquery tips tricks

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

5 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

5 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

5 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

5 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

5 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago