Using jquery, how can I get this "inner text" of a li element?

Question

I have the following html and I am trying to figure out the right selector logic to read in certain part. NOTE: I can't change the html as this is being generated by a plugin.

  <li class="select2-selection__choice" title="">
      <span class="select2-selection__choice__remove" role="presentation">×</span>
    MS Office
 </li>
 <li class="select2-selection__choice" title="">
      <span class="select2-selection__choice__remove" role="presentation">×</span>
    Photoshop
 </li>

and I am trying to read out the text inside the

 <li class="select2-selection__choice">

but NOT including the

 <span class="select2-selection__choice__remove">

so for the example above, I am looking to parse out the following text:

 MS Office, Photoshop

@WhiteHat - I don't have a choice as this html is being generated by a plugin so this is what i am given (thus the question) — leora, Oct 03 '15 at 02:33

score 2 · Accepted Answer · answered Oct 03 '15 at 02:32

2

Try like this

$('.select2-selection__choice').each(function() {
    var text = $(this).clone().children().remove().end().text();
    console.log(text.trim());
});

SNIPPET

$('.select2-selection__choice').each(function() {
    var text = $(this).clone().children().remove().end().text();
    console.log(text.trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="select2-selection__choice" title="">
      <span class="select2-selection__choice__remove" role="presentation">×</span>
    MS Office
 </li>
 <li class="select2-selection__choice" title="">
      <span class="select2-selection__choice__remove" role="presentation">×</span>
    Photoshop
 </li>

answered Oct 03 '15 at 02:32

Anik Islam Abhi

25,137
8
58
80

this solution seems to include the "x" that is in the select2-selection__choice__remove span. which i don't want to include – leora Oct 03 '15 at 02:38
check the console not the html .. – Anik Islam Abhi Oct 03 '15 at 02:39
3

Please provide an explanation, not just code. – Anid Monsur Oct 03 '15 at 02:40

score 1 · Answer 2 · answered Oct 03 '15 at 02:38

1

Use the .class selector:

$('.select2-selection__choice').each(function() {
    var inneText = $(this).children().text();        
});

answered Oct 03 '15 at 02:38

Gabriel Rodriguez

1,163
10
23

Using jquery, how can I get this "inner text" of a li element?

2 Answers2