<html>
<head></head>
<body>
....content html....
....content html....
....content html....
<ul class="sidebar-menu">
        <li class="header">MAIN NAVIGATION</li>
        <li id="menu_1" class="treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Menu 1</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu" style="display: none;">
            <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
            <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
          </ul>
        </li>
  <li id="menu_2" class="treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Menu 2</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu" style="display: none;">
            <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
            <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
          </ul>
        </li>
  <li id="menu_3" class="treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Menu 3</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu" style="display: none;">
            <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
            <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
          </ul>
        </li>
  <li id="menu_4" class="treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Menu 4</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu" style="display: none;">
            <li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
            <li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
          </ul>
        </li>
      </ul>
....content html....
....content html....
....content html....
<!--Panggil jquery library-->
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!--lain2x library yg di gunakan-->
<!--lain2x library yg di gunakan-->
<!--lain2x library yg di gunakan-->
<!--lain2x library yg di gunakan-->
<!--lain2x library yg di gunakan-->
<!--lain2x library yg di gunakan-->

<!--Harus di letak bawah sekali sebelum tutup </body>-->
<!--pastikan juga selepas jquery.min.js di panggil-->
<script>
$(document).ready(function(){
	//script ni bertujuan utk remove it self (mengikut id) bg li yang empty...
	if ($("#menu_1 li").length == $("#menu_1 li:empty").length) {
        $('#menu_1').remove();
    }
    if ($("#menu_2 li").length == $("#menu_2 li:empty").length) {
        $('#menu_2').remove();
    }
    if ($("#menu_3 li").length == $("#menu_3 li:empty").length) {
        $('#menu_3').remove();
    }
    if ($("#menu_4 li").length == $("#menu_4 li:empty").length) {
        $('#menu_4').remove();
    }
});
</script>
</body>
</html>