How to hide div html?

Question

<div class="navigation-menu w-32 d-flex flex-row">
   <div class="visible"><a href="#">Раздел1</a></div>
   <div class="visible"><a href="#">Раздел1</a></div>
   <div class="visible"><a href="#">Раздел1</a></div>
   <div class="visible"><a href="#">Раздел1</a></div>
   <div class="visible"><a href="#">Раздел1</a></div>
   <div id="more-hd more-vis"><i class="fas fa-chevron-circle-down"></i></div>  
 </div>

I am trying to hide the last Div.I use bootstrap.So,d-none doesn't help, in css #more-hd display:none also,with JS document.getElementById("more-hd").style.display = "none" too.It is always visible..I also tried with ul > li first..nothing happens

Answer 1

Use display: none !important; to the last div add a class to the last div and use that css in that class. Using !important will override the css that has already been applied to this div. You also have multiple id, it is a bad practice so use a single id there.

.lastDiv{
  display: none !important;
}

<div class="navigation-menu w-32 d-flex flex-row">
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div id="more-hd more-vis" class='lastDiv'>SomeContent<i class="fas fa-chevron-circle-down"></i></div>  
</div>

If you want to use id then use a single id value with this code:

#more-hd{
  display: none !important;
}

<div class="navigation-menu w-32 d-flex flex-row">
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div id="more-hd" class='lastDiv'>SomeContent<i class="fas fa-chevron-circle-down"></i></div>  
</div>

You also has option for last-child selector in css to make sure whatever the id or class is for the last div inside class navigation-menu, it is always hidden:

.navigation-menu div:last-child{
  display: none !important;
}

<div class="navigation-menu w-32 d-flex flex-row">
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div class="visible"><a href="#">Раздел1</a></div>
          <div id="more-hd more-vis" class='lastDiv'>SomeContent<i class="fas fa-chevron-circle-down"></i></div>  
</div>