const span = document.createElement('span');
   span.innerHTML = '<i class="fal fa-times">x</i>';
   span.innerHTML += '#' + listReports.value;
   span.addEventListener('click', (e) => e.target.closest('span').remove());

https://jsfiddle.net/rbqthd57/14/

1) Делай действие когда анимация реально закончится а не через 400 миллисекунд (но это фиг с ним)
2) Делегируй обработку событий на общего родителя (это самое важное)

e.target.closest('span').remove())
Там логика удаления сложнее

да я заметил, анимации, а так по хорошему да дегегировать и все проблема евента уйдет

А там анимация через css и для этого я setTimeout сделал

Я понимаю что через цсс. Надо ждать "окончания анимации" а не "400мс"

Это разные по смыслу, по сути и по коду вещи

А как это понять?

И именно в этом твоя задача

.toString() это метод обычного объекта или объекта-обёртки примитива. В зависимости от объекта он может работать по разному и даже может быть переопределён. String() выполняет гору проверок и в зависимости от типа аргумента, наличия Symbol.toPrimitive он в конце концов может выполнить метод .toString(). В целом, в большинстве случаев если у объекта есть .toString() он вернёт то же самое что String(). Нюансы можешь посмотреть в спеке.

animationend/tansitionend события есть

В когде что я кинул всё есть

Можно без промиса, просто подпиской на собыие, но промисом удобнее

Ок, спасибо

Но это фигня как я и сказал, главная твоя ошибка - это то как ты пытался обрабатывать события имея при этом список который динамически добавляется

В таких случаях надо делегировать

Я давно на js не писал, все забыл, вот пришло время когда нужно было затронуть js)

А на уме только самое дефолтное )

Всем привет.
Актуальны ли вообще библиотеки направленные на взаимодействие с сервером, если да, то какие?

Не особо, есть fetch, XHRRequest
Он более чем справляются со своей задачей

Но вообще есть либа axios еще

А вот с сокетами интереснее, для сокетов есть например socket.io