Here are the change apparently required.

In the Blade file:

@if($article->image !== 'default.jpg')
  <a class="remove-image edit" href="#" id="delete-image" data-uid="{{$article->id}}" title="Remove image" onclick="removeImage(event)">
      <i class="fa fa-remove"></i>
  </a>
@endif

Must change to this:

<a class="remove-image {{ $article->image !== 'default.jpg' ? 'edit' : '' }}"
   href="#"
   id="delete-image"
   data-uid="{{ $article->id }}"
   title="Remove image"
   style="{{ $article->image === 'default.jpg' ? 'display: none;' : '' }}"
   onclick="removeImage(event)">
    <i class="fa fa-remove"></i>
</a>

In JavaScript, you should have:

<script>
    function previewImage(event) {
        const img = document.getElementById('imagePreview');
        const imageContainer = img.parentNode.parentNode;
        const input = event.target;
        const removeLink = document.getElementById('delete-image');

        const reader = new FileReader();

        reader.onload = function() {
            img.src = reader.result;

            if (window.getComputedStyle(imageContainer).display === 'none') {
                imageContainer.classList.remove('d-none');
            }

            // Show the remove link and disable AJAX for temporary image
            removeLink.style.display = 'inline-block';
            removeLink.classList.remove('edit');
        };

        if (input.files.length > 0) {
            reader.readAsDataURL(input.files[0]);
        }
    }

    function removeImage(event) {
        const defaultImg = document.getElementById('defaultImage').value;
        const input = document.getElementById('file');
        const img = document.getElementById('imagePreview');
        const imageContainer = img.parentNode.parentNode;
        const removeLink = document.getElementById('delete-image');

        event.preventDefault();

        // Case 1: Removing existing image via AJAX
        if (event.currentTarget.classList.contains('edit')) {
            const id = event.currentTarget.dataset.uid;
            const fileName = img.getAttribute('src').split('/').pop();
            const url = `${APP_URL}/dashboard/articles/delete-image/${id}/${fileName}`;

            if (confirm('This action is irreversible. Are you sure?')) {
                const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                const xmlhttp = new XMLHttpRequest();

                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState === XMLHttpRequest.DONE) {
                        if (xmlhttp.status === 200) {
                            img.src = defaultImg;
                            removeLink.style.display = 'none';
                        }
                    }
                };

                xmlhttp.open('POST', url, true);
                xmlhttp.setRequestHeader("X-CSRF-TOKEN", CSRF_TOKEN);
                xmlhttp.send();
            }
        }
        // Case 2: Removing a temporary uploaded image before form submission
        else {
            img.src = defaultImg;
            input.value = "";
            imageContainer.classList.add('d-none');
            removeLink.style.display = 'none';
        }
    }
</script>