Выбор ответа Junior DOM на практике спрашивают часто обновлено
Удаление по кнопке с иконкой
Вопрос
Кнопка удаления содержит <svg>. При клике по иконке строка не удаляется. Какой вариант исправит обработчик?
list.addEventListener('click', (e) => {
if (e.target.dataset.action === 'remove') {
e.target.parentElement.remove();
}
});
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Найти кнопку через e.target.closest('[data-action="remove"]'), затем её li. При клике по иконке e.target это <svg или <path, у них нет data-action. closest поднимается от цели к предкам и находит кнопку, а потом её строку.
Варианты ответа
- Повесить отдельный обработчик клика на каждую кнопку удаления вместо списка
- Добавить
{ capture: true }в addEventListener, чтобы клик ловился раньше иконки - Заменить
e.targetнаe.currentTarget, чтобы получать кнопку, а не<svg> - Найти кнопку через
e.target.closest('[data-action="remove"]'), затем еёliправильный ответ
Разбор
При клике по иконке e.target это <svg> или <path>, у них нет data-action. closest поднимается от цели к предкам и находит кнопку, а потом её строку. Обработчик на каждую кнопку тоже сработал бы, но ломает делегирование и не работает для новых строк без повторной подписки. capture меняет фазу, но не цель. e.currentTarget это сам список, удалится не та строка.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.