//EVENT BUBBLING AND EVENT DELEGATION

//1. EVENT BUBBLING
/*
document.querySelector('.todo-list-element').addEventListener('click',toDoList);

function toDoList(){
        console.log('To Do List Li Element Clicked');
}

document.querySelector('.todo-list').addEventListener('click',toDo);

function toDo(){
        console.log('To Do Ul Clicked');
}

document.querySelector('.list-wrapper').addEventListener('click',listWrapper);

function listWrapper(){
        console.log('List Wrapper Clicked');
}
*/
//EVENT DELEGATION WE TARGET THE PARENT

// document.querySelector('.todo-list-element-trash').addEventListener('click',function(){
//         console.log('Trash Link Was Clicked');
// });
var listWrapper = document.querySelector('.list-wrapper');
listWrapper.addEventListener('click',function(e){

        if(e.target.className ==='fa fa-trash'){

                // var parent = e.target.parentNode.id;
                // console.log(parent);
                // console.log(e.target);

                var parent = e.target.parentNode.parentNode;
                parent.remove();
                console.log(parent);
               
        }
        else{
                console.log('You Have clicked outside the trash icon');
        }
});