JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<h2>group 1</h2>
<ul class="group1">
    <li>content</li>
    <li>content</li>
    <li>  </li>
</ul>

<h2>group 2</h2>
<ul class="group2">
    <li>content</li>
    <li>content</li>
    <li>  </li>
</ul>

CSS

h2 {
    margin: 8px 0;
    font-weight: bold;
}

li {
    height: 20px;
    border: 1px dotted #333;
    margin-top: 4px;
    width: 150px;
}

JavaScript

$('li').filter(function() {
    return $.trim($(this).text()).length == 0;
}).remove();

$(".group1 li").each(function () {
      if ($(this).is(":empty")) {
          $(this).addClass('empty-list-item');
      }
  });


  $('.group2 li:empty').remove();