JavaScript/jQuery detect if div contains text excluding children

Question

I need to verify if a DIV has some text or not inside of it BUT NOT inside its children, eg see this example

<div id='one'>
  <div id='two'>Abc</div>
</div>
<div id='three'>xyz
  <div id='four'></div>
</div>

If I hover/click element one I want to get false (no text), but if i hover element three I want to get true

i tried using

$('#one').text().trim().length > 0

but it seems to check also any children which is want I do not want to happen

Possible duplicate of [jquery - get text for element without children text](https://stackoverflow.com/questions/11362085/jquery-get-text-for-element-without-children-text) — guradio, Dec 12 '17 at 01:35

score 4 · Answer 1 · answered Dec 12 '17 at 01:29

4

This is already answered here: jquery - get text for element without children text

Also mentions using a plugin to accomplish getting only the text of the element and not child elements here: http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/

answered Dec 12 '17 at 01:29

iCode

1,254
1
13
16

should have been closed as duplicate if you think it is answered already – guradio Dec 12 '17 at 01:35

score 0 · Answer 2 · answered Dec 12 '17 at 01:21

This meets your requirements

window.onload=function(){
  var two = document.getElementById('two').textContent;
  console.log(two.trim()=='');
  var three = document.getElementById('three').textContent;
  console.log(three.trim()=='');
}

<div id='one'>
    <div id='two'>Abc</div>
</div>
<div id='three'>
      <div id='four'></div>
</div>

JavaScript/jQuery detect if div contains text excluding children

2 Answers2