event.currentTarget.parentNode.remove(); not working

I am trying to learn stuff I was used to doing in jQuery in plain JavaScript.

I have an example I found on the internet to solve, which gave me a hard time.

I am trying to remove the parent div. single on click on the button. remove.

Here is the code;

<div class="row" id="showAward">

</div>
<div class="w-100 text-center">
    <a id="add" class="bg-primary text-white px-3 py-2 rounded-circle cursor-pointer">
        <i class="fa-solid fa-plus"></i>
    </a>
</div>

<script>
    let count = 0;

    document.addEventListener('click', function(event) {
        if (event.target.id === 'add') {
            count++;
            addAward(count);
        }
        if (event.target.classList.contains('delete')) {
            event.currentTarget.parentNode.remove();
        }
    });
    function addAward(number) {
        let html = `<div class="col-lg-4 mb-3 position-relative">
            <label for="image${number}" class="form-label">image ${number}</label>
            <input type="file" class="form-control" id="image${number}" name="image${number}">
            <a class="delete text-danger cursor-pointer position-absolute end-0 top-0"><i class="fa-solid fa-times"></i></a>
        </div>`;
        document.getElementById('showAward').insertAdjacentHTML('beforeend', html);
    }

</script>