How to get just
text without getting text from other elements inside li

Question

I have an ul list inside which li are there, and inside li text and div are there. same class is assigned to li while div are assigned with different class name.

I just want to get the text from li and not from div. Here is the snippet:

$("ul li").on('click', function() {
  $("span").text($(this).text());
});

ul {
  position: relative
}
div {
  position: absolute;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='same'>Text1
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text2
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text3
    <div class='notsame'>Other text</div>
  </li>
  </ul>
  <span> </span>

I get the O/P, but also text inside div come how to avoid that ?

A (not very nice) alternative to using `nodeType==3` here: https://stackoverflow.com/questions/7063408/how-to-get-text-only-from-the-div-when-it-has-child-elements-with-text-using-jqu — freedomn-m, Aug 11 '17 at 09:16
Possible duplicate of [get text node of an element](https://stackoverflow.com/questions/6520192/get-text-node-of-an-element) — freedomn-m, Aug 11 '17 at 09:17

score 5 · Accepted Answer · answered Aug 11 '17 at 09:06

Filter out the text nodes from the li - see demo below:

$("ul li").on('click', function() {
  $("span").text($(this).contents().filter(function(){
      return this.nodeType == 3; // select text nodes
  }).text()); // paste all of them to the span
});

ul {
  position: relative
}

div {
  position: absolute;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='same'>Text1
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text2
    <div class='notsame'>Other text</div> and more
  </li>
  <li class='same'>Text3
    <div class='notsame'>Other text</div>
  </li>
  </ul>
    <span> </span>

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

You could use the TextNode Object.

Plain JavaScript properties:

If you do mix plain JavaScript with jQuery remember to dereference the jQuery object you intend to use plain JavaScript on by using:

Bracket Notation:

$(Object)[0]

or

.get() method:

$(Object).get(0)

Details commented in demo

Demo

$("ul li").on('click', function() {
  /* Dereference $(this) by adding [0]
  || $(this)[0] = this
  || Now plain JavaScript methods and properties...
  ||...can be used.
  */
  /*
  || this.firstChild
  || .firstChild property will return the first node
  || A node can be an element, a comment, text, or...
  ||...even whitespace.
  || see: https://developer.mozilla.org/en-US/docs/Web/API/Node
  || The firstChild of any <li> is "Text1", "Text2", 
  || or "Text3"
  */
  /*
  || this.firstChild.nodeValue
  || .nodeValue will return a node as a string
  */
  $("span").text($(this)[0].firstChild.nodeValue);
});

ul {
  position: relative
}

div {
  position: absolute;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='same'>Text1
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text2
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text3
    <div class='notsame'>Other text</div>
  </li>
  <ul>
    <span> </span>

score 1 · Answer 3 · edited Aug 11 '17 at 09:44

Use $(this).clone().children().remove().end().text() to get the text of outer element

$("ul li").on('click', function() {
  $("span").text($(this).clone().children().remove().end().text());
});

ul {
  position: relative
}

div {
  position: absolute;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='same'>Text1
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text2
    <div class='notsame'>Other text</div>
  </li>
  <li class='same'>Text3
    <div class='notsame'>Other text</div>
  </li>
  <ul>
    <span> </span>

score 0 · Answer 4 · answered Aug 11 '17 at 09:31

0

My prefered solution is to create a clone of the element in the memory, and remove it's children before reading it's content.

In your case:

$( "ul li" ).on( 'click' , function() {

   $( "span" ).text( $(this).clone().children().remove().end().text() );

});

I recommend this solution because it's a one-liner.

answered Aug 11 '17 at 09:31

István Pálinkás

2,217
7
25
50

hi @Steven, how to change the text of that ? – Jafar Pinjar Mar 14 '19 at 09:34
@jafarpinjar How to change the text of what? :) – István Pálinkás Mar 14 '19 at 09:55
this line give the text of li, but after getting that text, I need to replace with some text – Jafar Pinjar Mar 14 '19 at 10:00

How to get just text without getting text from other elements inside li

4 Answers4

Demo

How to get just
text without getting text from other elements inside li