Как правильно обработать событие с динамически добавленными элементами?

Question

Я занимаюсь разработкой приложения ToDo с использованием HTML и JS, но застрял с удалением динамически добавленных элементов. Есть ли способ удалить выделенный элемент?

Я попытался удалить элемент, выбрав его родителя, а затем связавшись с дочерним элементом и удалив его. Не удалось организовать удаление выбранного элемента. el.removeChild(el.childNodes[0]) удаляет элемент с начала. Есть ли способ удалить выбранный активный элемент?

document.addEventListener('click',function(e){
  if(e.target && e.target.id== 'rem'){
    let el = document.getElementById('uList');
    el.removeChild(el.childNodes[0]); // How to remove the clicked el?
   }
}); 

Я ожидаю, что код удалит элемент, по которому щелкнули, а не узлы, начиная с элемента 0.

Большое спасибо!

Answer 1

document.addEventListener('click', function(e) {
    if (!e.target || e.target.id !== 'rem') {
        return;
    }
    let parent = e.target.parentElement;
    if (!!parent) {
        parent.removeChild(e.target);
    }
}); 

для родителя родителя:

document.addEventListener('click', function(e) {
    if (!e.target || e.target.id !== 'rem') {
        return;
    }
    const parent = e.target.parentElement;
    if (!parent) {
        return;
    }
    const parentOfParent = parent.parentElement;
    parent.removeChild(e.target);
    if (!!parentOfParent) {
        parentOfParent.removeChild(parent);
    }
});