How can it be tested using jQuery or JavaScript, if a given element has only one child element (including text nodes, but ignoring blank-spaces).

Example: for element 'div' in markup below, the test should fail because it has two child elements: p and the text node:

<div>
    <p>Test-1</p> - subline
</div>

Example: for element 'div' in markup below, the test should pass because it has only one child element: p (although spaces are ignored):

<div>
    <p>Test-1</p>
</div>

It seems like element.children() won't work because it ignores text nodes. element.contents() may work, but it doesn't ignore blank-spaces.

How can it be tested using jQuery or JavaScript, if a given element has only one child element (including text nodes, but ignoring blank-spaces).

Example: for element 'div' in markup below, the test should fail because it has two child elements: p and the text node:

<div>
    <p>Test-1</p> - subline
</div>

Example: for element 'div' in markup below, the test should pass because it has only one child element: p (although spaces are ignored):

<div>
    <p>Test-1</p>
</div>

It seems like element.children() won't work because it ignores text nodes. element.contents() may work, but it doesn't ignore blank-spaces.

• javascript
• jquery

4 Answers 4

You will have to use a custom filter

var elements = $('div');

elements.each(function() {
  var element = $(this);
  var count = element.contents().filter(function() {
    return this.nodeType == Node.ELEMENT_NODE || (this.nodeType == Node.TEXT_NODE && !!$.trim(this.nodeValue))
  }).length;

  snippet.log(this.id + ': ' + count)
});

<!-- Provides the `snippet` object, see http://meta.stackexchange./a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
  <p>Test-1</p>
</div>
<div id="2">
  <p>Test-1</p>1
</div>
<div id="3">
  <p>Test-1</p><span>x</span>
</div>
<div id="4">
  2
  <p>Test-1</p>3
</div>

you can try simple js as

element[0].childNodes.length

this will include the text nodes as well as the normal child nodes.

if a given element has only one child element (including text nodes, but ignoring blank-spaces).

To exclude whitespaces

element.contents().filter(function() {
    return this.nodeType === 3 && this.nodeValue.trim().length > 0; 
}).length; //to get the number of text nodes which are not white-spaces

or in pure js

element[0].childNodes.filter(function() {
    return this.nodeType === 3 && this.nodeValue.trim().length > 0; 
}).length;

Non jquery version.

Could be optimized, but this works. value.nodeType === 1 to check if it's an element, and we increase the counter.

var count = 0;
Array.prototype.slice.call(document.getElementById('parent_id_here').childNodes, 0).forEach(function (value) {
    if (value.nodeType === 1) {
        count++;
    }
});

Demo

You can use this condition:

$('div').html().trim() == $('div > *:first-child')[0].outerHTML.trim()