Добавление класса с «Display: none» к элементу не работает в jquery

Question

У меня есть div, который я хочу скрыть (отображение: нет).

Html:

<div class="alert">
        <div class="notice">
            <div class="header">
                <h1>Notice:</h1><i class="fas fa-window-close"></i>
            </div>
            <div class="body">
                <p>You must select at least one seat to Continue.</p>
            </div>
            <div class="footer">
                <button>Ok</button>
            </div>
        </div>
    </div>

Css:

.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;
}

когда я добавляю приведенный ниже класс, он не работает вообще, но он работает над добавлением свойств к тому же классу, таких как цвет, поле, отступы ... но он не работает с "display: none" и это также работает, когда я ввожу от css до js как $ ('element'). css ('display', 'none') css:

.noticeClose {
  display: none;
}

js / jquery:

 $("div.bookingBtn input").click(function () {
    if ($("input[type=checkbox]:checked").length == 0) {
      $("div.alert").addClass("noticeClose");
      return false;
    }
  });

Хорошего дня!

Answer 1

похоже, что есть другой стиль, который переопределяет свойство отображения.

попробуйте следующий

.noticeClose {
  display: none!important;
}

, если это не работает, то, возможно, hide

 $("div.bookingBtn input").click(function () {
    if ($("input[type=checkbox]:checked").length == 0) {
      $("div.alert").hide();
      return false;
    }
  });

также это не работает - попробуйте выполнить отладку, чтобы убедиться, что div.alert получает класс noticeClose после щелчка.