What does .modal('dispose') do? Bootstrap 4

Question

According to the documentation the .modal('dispose'), destroys the modal.

.modal('dispose')

Destroys an element’s modal.

But when I create an eventListener using

$('#myModal').on('hidden.bs.modal', function (event) {
    // Destroy modal
    $('#myModal').modal('dispose');
});

The modal is still part of the document. The documentation confuses me, is this method not used to remove the modal from the document? What is the purpose of this method?

$('#myModal').modal('show');

$('#myModal').on('hidden.bs.modal', function (event) {
  console.log('Destroy modal');
  $('#myModal').modal('dispose');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

It destroys the jQuery instance of the Bootstrap's Modal component. It doesn't remove the Modal markup from the DOM.