为什么不能删除同级事件监听器？

Question

 function show1() { console.log("ok1"); document.getElementById("a2").removeEventListener("click", delegate); } function show2() { console.log("ok2"); } function show3() { console.log("ok3"); } function delegate(event) { var flag = event.target; switch (flag.id) { case "a1": show1(); break; case "a2": show2(); break; case "a3": show3(); break; } } ob = document.getElementById("tl"); ob.addEventListener("click", delegate); 

 <ul id="tl"> <li id="a1">a1</li> <li id="a2">a2</li> <li id="a3">a3</li> </ul> 

The parent node ul contains three son nodes li ,bind a event listener on the parent node ,let ul delegate all node's event listening.
My expectation:
when you click a1 , show1 function will remove event listener on its sibling whose id is a2 .
That is to say,you click li whose id is a2 after clicking li whose id is a1 , ok2 will not show on console.

The real action:
You click li whose id is a2 after clicking li whose id is a1 , ok2 will show on console.

Why

document.getElementById("a2").removeEventListener("click",delegate);

can't remove the event listener on sibling's?
How to fix it?

Answer 1

If a listener is attached to an element, the only thing you can do about removing it is to remove the same listener from the same element - you can't remove it from a child element because it's not attached to the child element.

For the functionality you're looking for, you might add the node you want to "remove" the click functionality from to a Set , and in the parent node's handler, check that the event.target (the flag variable) is not included in that Set :

 const elementsToIgnore = new Set(); function show1() { console.log("ok1"); elementsToIgnore.add(document.getElementById("a2")); } function show2() { console.log("ok2"); } function show3() { console.log("ok3"); } function delegate(event) { var flag = event.target; if (elementsToIgnore.has(flag)) return; switch (flag.id) { case "a1": show1(); break; case "a2": show2(); break; case "a3": show3(); break; } } ob = document.getElementById("tl"); ob.addEventListener("click", delegate); 

 <ul id="tl"> <li id="a1">a1</li> <li id="a2">a2</li> <li id="a3">a3</li> </ul> 

Answer 2

This is beacus you are adding event listener to ul not li . Add event handler to li as following

 function show1(){ console.log("ok1"); document.getElementById("a2").removeEventListener("click",delegate); } function show2(){ console.log("ok2"); } function show3(){ console.log("ok3"); } function delegate(event) { var flag = event.target; switch(flag.id){ case "a1": show1(); break; case "a2": show2(); break; case "a3": show3(); break; } } ob = document.getElementsByTagName("li"); for(let i=0; i<ob.length; i++){ ob[i].addEventListener("click",delegate); } 

 <ul id="tl"> <li id="a1">a1</li> <li id="a2">a2</li> <li id="a3">a3</li> </ul>