Удалить фото по нажатию кнопки из карусели с JQuery

Question

Код HTML ниже представляет собой пустую карусель, созданную с помощью bootstrap 4.

Затем функция previewImages() загружает div.carousel-item с фотографией внутри нее в карусель.

При нажатии кнопки #delete-btn активная кнопка карусели удаляется.

function previewImages() {

  var $preview = $('#preview');
  if (this.files) $.each(this.files, readAndPreview);

  function readAndPreview(i, file) {

    if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
      return alert(file.name + " is not an image");
    } // else...

    var reader = new FileReader();

    if ($preview.children().length == 0) {
      if (i === 0) {
        $(reader).on("load", function() {
          $preview.append('<div class="carousel-item active" id="carouselItem"><img class="d-block" src="' + this.result + '"></div>');
        });
      } else {
        $(reader).on("load", function() {
          $preview.append('<div class="carousel-item" id="carouselItem"><img class="d-block" src="' + this.result + '"></div>');
        });
      }
    } else {
      $(reader).on("load", function() {
        $preview.append('<div class="carousel-item" id="carouselItem"><img class="d-block" src="' + this.result + '"></div>');
      });
    }
    reader.readAsDataURL(file);

  }

}

$('#file-input').on("change", previewImages);


function deletePhoto() {

  $("#preview div.active").remove();
  // $(".carousel-item:first-child").addClass("active");

}

$('#delete-btn').on("click", deletePhoto);

<form>
  <div class="photo-upload d-flex" id="photo-upload">
    <div id="carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" id="preview"></div>
      <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="photo-menu text-center">
      <label class="photo-input" class="btn photo-input">
                        Выбрать файл <input id="file-input" type="file" name="photo" multiple hidden>
                    </label><br>
      <button class="btn btn-link delete-btn" id="delete-btn">Удалить фото</button>
    </div>
  </div>
</form>

Но эта функция удаляет все элементы карусели!

Пожалуйста, помогите, я не смог решить эту проблему проблема на сутки.