title: Adding a class with "Display:none" to an element is not working in jquery
body: <p>I have a div which i want to hide (display:none).</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="alert"&gt;
          &lt;div class="notice"&gt;
              &lt;div class="header"&gt;
                  &lt;h1&gt;Notice:&lt;/h1&gt;&lt;i class="fas fa-window-close"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div class="body"&gt;
                  &lt;p&gt;You must select at least one seat to Continue.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="footer"&gt;
                  &lt;button&gt;Ok&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.alert {
    position: fixed;
    background-color: rgb(252, 238, 235, 0.4);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
  }
  </code></pre>
  
  <p><strong>when i add the below class it doesn't work at all, but it does work on adding properties to that same class like color,margin,padding... but it doesn't work on "display:none" and it also works when i enter css through js like 
  $('element').css('display','none')</strong>
  css:</p>
  
  <pre><code>.noticeClose {
    display: none;
  }
  </code></pre>
  
  <p>js/jquery:</p>
  
  <pre><code> $("div.bookingBtn input").click(function () {
      if ($("input[type=checkbox]:checked").length == 0) {
        $("div.alert").addClass("noticeClose");
        return false;
      }
    });
  </code></pre>
  
  <p>Hava a nice day!</p>