I have a modal displayed via JavaScript by clicking the button delete (deleting an option from a select tag). I have to check if an option is selected before displaying the alert modal but I couldn't find a way to hide the alert modal even if nothing is selected.

I used a JavaScript function to check but still after checking the alert modal appears.

This is the HTML code:

blade

<select class="form-control selectpicker" title="Nothing selected." id="category_id" name="category_id" data-live-search="true">
    @foreach($categories as $id => $name)
        <option value="{{ $id }}">{{ $name }}</option>
    @endforeach
</select>

<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    <i class="fas fa-plus"></i>
</a>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-sm modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Warning</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Please select a location.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

script

<script>
    let count = 0;
    $('#addFilter').click(function () {
        if($('#category_id').val() === ''){
            alert("Please select a location.");
            return false;
        }
    });

    $('#staticBackdrop').on('show.bs.modal', function (event) {
        var modal = $(this);
        modal.find('#filter').val(filter);
    });