Показать или скрыть значок каретки в раскрывающемся меню bootstrap4 в зависимости от наличия или отсутствия выпадающего меню

Question

Хочу показать или скрыть значки каретки на основе пунктов меню присутствует или нет. если пункты меню присутствуют, покажите значок каретки, иначе скройте его. я использую bootstrap4, и в моем случае пункты выпадающего меню будут генерироваться динамически.

.dropdown-toggle::after {
    display:none;!important
}

Выше кода удаляет символ каретки, но как показать / скрыть его на основе меню в выпадающем списке или нет?

.dropdown-toggle::after {
    display:none !important;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>

Answer 1

Используйте .hide(), если внутри нет предметов $('.dropdown-menu .dropdown-item').length==0

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

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">



<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">list<i class="fas fa-shopping-cart"></i>
 
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
</div>

Только css use only-child:

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">



    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">list<i class="fas fa-shopping-cart"></i>
     
        </button>
    </div>

Answer 2

Создайте класс с надписью .hidden и добавьте в него свойство display none, как.

.hidden {
display:none !important
}

и в вашем JS сделайте это:

    $(document).ready(function(){


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

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