Как заблокировать спецсимвол ×

Всем доброго вечера! У меня такая проблема. Есть задание сделать меню с ценами и чтобы их можно было добавлять и удалять из заказа. После нажатия на кнопку оплаты, у меня должны блокироваться все кнопки с позициями, чтобы ничего нельзя было добавить в заказ и удалить из него. Блокировку кнопок для добавления я сделал, а вот как мне заблокировать спец символ ×, чтобы при нажатии на него в браузере позиция не удалялась? Обычная блокировка для кнопок не подходит, он ее игнорирует. Помогите пожалуйста. Вот вырезка как я блокировал кнопки:

document.querySelector('.payed').addEventListener('click', function() {
document.querySelector('.stuffing_cheese_small').disabled = true;
document.querySelector('.stuffing_potato_small').disabled = true;
}

И вот как я создал спецсимвол через js:

var deleteIcon = document.createElement('span');
deleteIcon.className = 'delete-position';
deleteIcon.innerHTML = '×';
bindDeleteEvent(deleteIcon);

(из комментария:)

мне больше подходит вариант с removeEventListener. Только вот не могу понять, у меня есть вот такая функция:

function bindDeleteEvent(element) {
    element.addEventListener('click', function(event) {
        var target = event.target;
        var closestPosition = target.closest('.position');
        closestPosition.remove();
    })
}

Как должен это должно выглядеть, вот так?:

document.removeEventListener('click',  bindDeleteEvent);      

Все, вот ответ на мой вопрос, если кому интересно:

 Array.prototype.slice.call(document.querySelectorAll('.delete-position')).forEach(function(element) {
        element.style.pointerEvents = 'none';
      });