Tenho uma div que serve como caixa de alerta. Nela tenho um texto e um botão.
Preciso que toda a caixa (a div no caso) fique invisível quando o botão for clicado, mas não consegui fazer isso funcionar de jeito nenhum.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <div class="allert-box" id="hm-tools-alert">
                    <p>
                        Para que todas as ferramentas funcionem é importante fazer o login de sua(a) conta(s) na(s) respectiv(a) ferramenta(s).<br>
                        Caso precise de alguma ajuda, entre em contato com o nosso suporte atravéz da Página de Suporte.
                    </p>
                    <button class="allert-box-close" id="hm-tools-alert-close">
                        <img src="images/icons/close.png" alt="Fechar">
                    </button>
                </div>

<!-- end snippet -->