Javascript не реагирует должным образом

У меня есть небольшая проблема, которую я даже не знаю, как объяснить. Главное, что у меня две кнопки, один из них - открыть форму редактирования:

И еще один для удаления и элемента:

Теперь главный вопрос в том, что и как реагирует, когда я нажимаю и где я нажимаю. Всякий раз, когда я нажимаю кнопку для редактирования (как вы можете видеть, у нее есть немного отступов по бокам), js загружает нужную мне форму редактирования, тем самым вызывая функцию, которую я указал для запуска всякий раз, когда происходит щелчок в редактировании кнопка «пробел».

Всякий раз, и здесь возникает проблема, я нажимаю кнопку, чтобы удалить, и здесь я имею в виду, когда я нажимаю на корзину (сам элемент <img>), он абсолютно ничего не делает, хотя когда я перемещаю мышь за пределы синего прямоугольника (другими словами элемент <img>) и щелкнуть внутри области с отступом, ТОГДА щелчок вызывает функцию, которая мне нужна. Прежде всего, когда я щелкаю в «области заполнения», event.target по какой-то причине не определен.

Я не могу понять причину этого, спасибо за любую помощь.

Обновлено: добавлен JS-код по запросу:

document.addEventListener('click',function(e){
    e.preventDefault();    
    const eTarget = event.target;
    console.info(event.target);

    switch(true){
        case eTarget.classList.contains('close-edit'):
            editContentContainer.classList.toggle('show');
            break;
        case eTarget.classList.contains('add-data'):
        case eTarget.classList.contains('edit-data'):
        case eTarget.classList.contains('delete-data'):
            asyncCollectAndAction(eTarget.id);            
            break;
        case eTarget.classList.contains('add-new-flavour'):
            addNewFlavourToProduct(eTarget);
            break;
    }
});


const asyncCollectAndAction = (targetID) => {   
    /*
        Action type:
        1 - Insert/Add
        2 - Edit
        3 - Delete
    */ 
   console.info('target Id is: ', targetID);

    let collectedData = '';
    let formCollector = ''
    const categoryType = targetID.split('-')[0];
    const actionType = targetID.split('-')[1];
    console.info('action type is: ', actionType, typeof(actionType), actionType);

    if (actionType != 'delete' || actionType != "delete"){
        formCollector = document.querySelectorAll(`[data-category^=${targetID}`);
    }

}

Просто чтобы подкрепить то, что я имел в виду, всякий раз, когда я нажимаю кнопку для удаления (на самом элементе), щелчок регистрируется JS (console.info(event.target); выводит элемент, который я щелкнул), но не вызывает функцию asyncCollectAndAction(eTarget.id);. Всякий раз, когда я перемещаюсь за пределы элемента, но все еще внутри границы заполнения (зеленая область между краем и границами элемента), только тогда вызывается функция asyncCollectAndAction(eTarget.id);, но event.target не определена. Этого не происходит, хотя когда я нажимаю кнопку редактирования или элемент, кажется, что это происходит только при нажатии кнопки удаления.