Вы разрабатываете страницу со списком заказов. Карточки - Ответ на вопрос по РВПЯJS №2495972

Вопрос

Вы разрабатываете страницу со списком заказов. Карточки заказов (.order-card) создаются динамически (часть приходит из API (Application programming interface) после загрузки страницы). Требования заказчика (см. ниже):
• при клике по кнопке «Удалить» внутри карточки нужно удалить соответствующую карточку из DOM без перезагрузки страницы;
• обработчик должен работать и для карточек, добавленных после первоначального рендера;
• используйте современный метод удаления узла.

Какое решение удовлетворяет требованиям?

• Для каждой кнопки при создании карточки: btn.addEventListener('click', () =˃ { btn.parentElement.removeChild(btn.closest('.order-card')); });
• Делегирование событий от контейнера/документа: document.addEventListener('click', (e) =˃ { if (e.target.classList.contains('delete')) { const card = e.target.closest('.order-card'); if (card) card.remove(); } });
• Один раз навесить обработчик на все текущие кнопки: container.querySelectorAll('.delete').forEach(btn =˃ { btn.onclick = () =˃ btn.closest('.order-card').remove(); });
• Делегирование, но проверять currentTarget: container.addEventListener('click', (e) =˃ { if (e.currentTarget.matches('.delete')) { e.currentTarget.closest('.order-card').remove(); } });
• Делегирование на контейнер по клику на карточку, а не на кнопку: container.addEventListener('click', (e) =˃ { if (e.target.matches('.order-card')) e.target.remove(); });

Ответ