Text on navbar collapse is not being hidden

I am using -

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    $(".navbar-collapse").collapse('hide');
});

and

$('.navbar-collapse .dropdown-menu').click(function(){
    $(".navbar-collapse").collapse('hide');
});

To hide the navbar, and it is hiding the collapsed navbar, but it is only hiding the background color/body of the navbar, and the text itself is still showing. What might fix this problem?

Here's my HTML:

 var elements = `<nav class="navbar navbar-default">
 <div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Main Menu</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
`

for(var i=0;i<jsonObject.length;i++){
  var row=jsonObject[i];
  console.log(row)

  if(row.subcategory_list && !row.command){
    elements += `
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">${row.category_name} <span class="caret"></span></a>
      <ul class="dropdown-menu">`
      for(var c=0;c<row.subcategory_list.length;c++){
        var subrow = row.subcategory_list[c];
        elements += `
        <li><a href="#">${subrow.subcategory_name}</a></li>
      `
      }
      elements += `</ul><li>`
  }
  else{
    elements += ` <li><a id=${row.command} href="#" onClick=GetMenu();>${row.category_name}</a></li>`
  }

}

elements += `</ul></div>
  </div>
</nav>
`
document.getElementById(divId).insertAdjacentHTML('beforeend', elements); 

and when the nav bar collapsed