DOM-manipulation/11app.js at master · akriity/DOM-manipulation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// Event Bubbling
// 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
//  My code didnt worked
/*document.body.addEventListener("click", deleteItem);
function deleteItem(e) {
  // kam nai garena
  if (e.target.parentElement.classList.contains("delete-item ")) {
    console.log("delete");
    e.target.parentElement.parentElement.remove();
  }
}*/

// Brad code that works

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

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

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