Как реализовать удаление элемента, по которому произошел клик?

Question

[Дмитрий Смыков]

Добрый день! Ситуация следующая:
По нажатию условной клавиши "А" в div добавляется параграф с какой-либо информацией. У этого параграфа также имеется крестик для удаления. Так как подобных параграфов может быть множество - каждому крестику при создании присваивается класс.
Есть функция:

deleteElement(event) {
    event.currentTarget.remove(); // он же this.remove()
}

Проблема заключается в том, что где бы и как я не пытался повесить данный обработчик на "крестик удаления" элемента - ничего не получается. При этом если такой обработчик повесить на элемент, который изначально присутствует на странице, то все срабатывает. А вот на созданные элементы уже после загрузки страницы ничего не срабатывает.

Пытался повесить обработчики на каждый элемент через цикл, но создается ощущение, что обработчик просто не видит этого элемента и никак не реагирует на какое-либо действия с ним.

Пытался прописать прям в HTML теге вызов выше описанной функции путем

<p onclick="deleteElement()">Крестик</p>

Но если функция написана не в самом HTML файле, то выдает ошибку, что функция не найдена. При прописании в файле HTML выдает ошибку, что .remove() не функция, что this неизвестно что, event.currentTarget тоже непонятно что.

Comments

[Алексей Скляров]

<p onclick="deleteElement(this)">Крестик</p>

[Дмитрий Смыков]

Алексей Скляров, так это же вызов функции. А в функции что ни напишешь - все ошибка кроме console.log()

[Артем Андреев]

Побольше кода бы прислали)

Answer 1

[Иван Корюков]

Выглядит так как будто вы вешаете обработчик, а потом добавляете элементы на страницу. В таком случае необходимо вешать обработчик на элемент-кониейнер, который с самого начала есть на странице, а уже во время клика вычислять по какому именно элементу был сделан этот клик.

Comments

[Дмитрий Смыков]

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

[Иван Корюков]

Дмитрий Смыков, нашёл на просторах интернета такой код. Думаю надо копать в эту сторону.

document.body.addEventListener('click', (event) => {
  if (!event.target.matches('.my-class')) return;
  console.log('click');
});

[Дмитрий Смыков]

Иван Корюков, в плане обработчика, возможно, но я не до конца понимаю проблемы, когда есть обособленная функция, вызов которой установлен на элемент, который добавляется уже после загрузки страницы.

[Иван Корюков]

Дмитрий Смыков, в том и дело, что на динамически создаваемые элементы не надо вешать обработчики.
Проблема тут в том, что на момент выполнения скрипта на странице ещё нет нужного элемента. Можно, конечно, вешать обработчик на элемент при его создании, но если у вас не SPA, то игра не стоит свеч, а если у вас SPA, то там 100% используется какой-нибудь фреймворк, который эту проблему решает.