JSFiddle - React, Tailwind, and code Playground

by Evgenii Malikov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="message"></div>
<ol id="myUL">
  <li>Sample Item 1
    <ol>
      <li>Sample Item 2
        <ol></ol>
      </li>
      <li>Account</li>
    </ol>
  </li>
  <li>Sample Item 3
    <ol></ol>
  </li>
  <li>Sample Item 4</li>
  <li>Sample Item 5
    <ol>
      <li>Sample Item 6
        <ol>
          <li>Sample Item 7
            <ol></ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

.error_item {
  border: 1px solid red;
}

JavaScript

$(document).ready(function() {
  var Text = '';
  var emptyLiText = '';
  var list=$('ol#myUL > li');
  list.each(function() {
    lenOl = $(this).find('ol').length;

    if (lenOl > 0) {
      lenOlLi = $(this).find('ol').children('li').length;

      if (lenOlLi == 0) {

        $(this).addClass('error_item');
        emptyLiText = $(this).clone() //clone the element
          .children() //select all the children
          .remove() //remove all the children
          .end() //again go back to selected element
          .text();

        emptyLiText = $.trim(emptyLiText);
        Text += ' ' + emptyLiText;

        $('.message').html('<div class="alert alert-danger">' +
          '<button type="button" class="close" data-dismiss="alert">&times;</button><b>Unable to Save:</b> Menu item <b>' + Text + '</b> is parent item but does not has sub-item inside.</div>');

        breakout = true;
        // return false;

      } else {
        ($(this).hasClass('error_item') == true) ? $(this).removeClass('error_item'): '';
      }


    }
  })
})