Show Or Hide Caret Icon On Bootstrap4 Dropdown Based On Dropdown Menu Present Or Not

I want to show or hide caret icons based on menu items is present or not. if menu items present show caret icon else hide it. i am using bootstrap4 and in my case dropdown menu ite

Solution 1:

Use .hide() if no items inside $('.dropdown-menu .dropdown-item').length==0

$( document ).ready(function() {
  if($('.dropdown-menu .dropdown-item').length==0 )
  {
   $('.fas.fa-shopping-cart').hide();
  }
});

<metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"crossorigin="anonymous"><divclass="dropdown"><buttontype="button"class="btn dropdown-toggle"data-toggle="dropdown">list<iclass="fas fa-shopping-cart"></i></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link 1</a><aclass="dropdown-item"href="#">Link 2</a><aclass="dropdown-item"href="#">Link 3</a></div></div>

Only css use only-child:

.dropdownbutton:only-child.fas.fa-shopping-cart{
display:none;
}

<metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"crossorigin="anonymous"><divclass="dropdown"><buttontype="button"class="btn dropdown-toggle"data-toggle="dropdown">list<iclass="fas fa-shopping-cart"></i></button></div>

Solution 2:

Make a class saying .hidden and add display none property to it like.

.hidden {
display:none !important
}

and in your JS do this:

    $(document).ready(function(){


var hasElement = $(".dropdown-menu" ).has("a");

   hasElement.length == 0 ? $(".dropdown-toggle").addClass("hidden") : $(".dropdown-toggle").removeClass("hidden")
});