jQuery - get only parent element text without children

Question

I have a web page I'm scraping, and the text I'm looking for is inside a span that contains another span

<div class="someParentDiv">
  <span>this is the text I want   
    <span class="childSpanClass">I don't want this text</span>
  </span>
</div>

I'm trying to get the text I want with a jQuery selection, but when I get the elemnt's text with text(), I will get also the child span's text, which I don't want.

I managed to get only the text I want with

$('div.someParentDiv span').remove('.childSpanClass')

but it seems a little backwards to me (see example), and I'm wondering if there's a better, nicer way to do it. Any ideas?

possible duplicate of [jquery exclude some child nodes from .text()](http://stackoverflow.com/questions/11270607/jquery-exclude-some-child-nodes-from-text) — Mritunjay, Jan 11 '15 at 10:19
@Mritunjay - it's similar, but not exactly the same situation — Yaron Schwimmer, Jan 11 '15 at 11:57

score 3 · Accepted Answer · answered Jan 11 '15 at 10:12

3

You could filter away everything that is not plain text by looping all contents:

var node = $('.someParentDiv > span').contents().filter(function() {
    return this.nodeType == 3; // text node
});

alert(node.text());

answered Jan 11 '15 at 10:12

Lg102

4,733
3
38
61

Nice. I was not aware of the whole `nodeType` thing. – Yaron Schwimmer Jan 11 '15 at 11:54

KooiInc · Answer 2 · 2015-01-11T11:03:27.323

Without JQuery: pick the textContent of the first child of the span element in div.someParentDiv. The first child is the TEXT_NODE (see MDN) of that span, which is a (non visible) separate node. With JQuery use $('.someParentDiv span').contents().first('[nodeType=3]').text();

var res = document.querySelector('#result');

// no jquery
res.innerHTML = 'DOM: ' + 
                 document.querySelector('.someParentDiv span').firstChild.textContent;

// jquery

res.innerHTML += '<br>JQuery: ' +  
                 $('.someParentDiv span').contents().first('[nodeType=3]').text();

#result {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someParentDiv">
  <span>this is the text I want   
    <span class="childSpanClass">I don't want this text</span>
  </span>
</div>

<div id="result"></div>

score 0 · Answer 3 · edited May 23 '17 at 10:26

0

jQuery - get only parent element text without children

3 Answers3