Cacher is the code snippet organizer for pro developers

//EVENT BUBBLING & EVENT DELEGATION UDEMY Modern JS Course

//BUBBLING is when events bubble or rise up in the DOM through their parent elements
//DELEGATION is adding a listener to a parent element and putting a condition targeting children down the DOM tree(almost opposite of bubbling)


//Bubbling Demonstration

// document.querySelector('.card-title').addEventListener('click', function(){
//   console.log('card title');
// } );

// document.querySelector('.card-content').addEventListener('click', function(){
//   console.log('card content');
// } );

// document.querySelector('.card').addEventListener('click', function(){
//   console.log('card');
// } );

// document.querySelector('.col').addEventListener('click', function(){
//   console.log('col');
// } );

//Event Delegation

// const delItem = document.querySelector('.delete-item');

// delItem.addEventListener('click', deleteItem);

document.body.addEventListener('click', deleteItem);

// function deleteItem(e){
//   if(e.target.parentElement.className === 'delete-item secondary-content'){
//     console.log('delete item');
//   }
// }

function deleteItem(e){
 if(e.target.parentElement.classList.contains('delete-item') ){
    console.log('delete item');
    e.target.parentElement.parentElement.remove();
 }
}