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=".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 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./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 e how to avoid that ?

• javascript
• jquery
• html
• list
• css-position

• A (not very nice) alternative to using nodeType==3 here: stackoverflow./questions/7063408/… – fdomn-m Commented Aug 11, 2017 at 9:16
• Possible duplicate of get text node of an element – fdomn-m Commented Aug 11, 2017 at 9:17

4 Answers 4

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./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>

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./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>

You could use the TextNode Object.

Plain JavaScript properties:

• .firstChild
• .nodeValue

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 mented 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 ment, text, or...
  ||...even whitespace.
  || see: https://developer.mozilla/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./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>

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 remend this solution because it's a one-liner.