JSFiddle - React, Tailwind, and code Playground

by Rob Crowther

HTML

<ul id="list1">
    <li>Item
    <li>
    <li>Item
    <li>
    <li>Item
</ul>

<ul id="list2">
    <li>Item</li>
    <li></li>
    <li>Item</li>
    <li></li>
    <li>Item</li>
</ul>

CSS

li:empty { display: none; }

JavaScript

var i1 = document.createNodeIterator(
    document.getElementById('list1'),
    NodeFilter.SHOW_ALL,
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
    false);

var count1 = 0, node1, nodes1 = "";
while (node1 = i1.nextNode()) { nodes1 += node1.nodeName + ' '; count1++; }
window.alert(count1);
window.alert(nodes1);

var i2 = document.createNodeIterator(
    document.getElementById('list2'),
    NodeFilter.SHOW_ALL,
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
    false);

var count2 = 0, node2, nodes2 = "";
while (node2 = i2.nextNode()) { nodes2 += node2.nodeName + ' '; count2++; }
window.alert(count2);
window.alert(nodes2);