Puedes hacerlo con la propiedad `style` de `CSS` y el valor `none` y `block` para ocultar y mostrar el `alert`.

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

<!-- language: lang-js -->

    $(window).ready(function () {
      $("#boton").click(function () {
        var x = document.getElementById("ok");
        x.style.display = "block";
        setTimeout(function () {
          $("#ok").fadeOut(3000);
        }, 3000);
      });
    });


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

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <button id='boton'>Registrar</button>

    <div id="ok" class="alert alert-success" style="display:none" role="alert">registrado exitosamente! <i class="fa fa-check-circle" aria-hidden="true"></i>
    </div>

<!-- end snippet -->

Y en el `class` del `div` quita `hidden` y agregar `style="display:none"` para que permanezca oculto y solo al presionar el botón se visualice y oculte en 3 segundos con `setTimeout()`.

Esto permitirá abrirlo y cerrarlo cuantas veces se necesite.