0

How to remove the event Listener from items (Task1, Task2) after clicking the 'Add new Task' button?

I want to remove hidingAndShowing function which is hiding nodeElements that are not the currentTarget because after adding a new Task (Add New Task Btn) the nodeList to which hidingAndShowing function is referring to has changed therefore all initial added EventListeners need to be removed and added again.
This is the code -> https://codepen.io/Tukoruzi/pen/QWJbyeX

In other words after 'Task N' has been added and opened I want it to close after either 'Task1' or 'Task2' has been clicked and opened.

const addNewTask = document.querySelector('.new-task-js');
addNewTask.addEventListener('click', () => {
  const accordion = document.querySelector('.accordion');
  accordion.insertAdjacentHTML('beforeend', newTask);

  // remove existing EventListeners because nodeList has changed
  const acc = document.querySelectorAll(".accordion-item-trigger");
  // NOT WORKING!!
  nodeList.forEach(item => {
    item.removeEventListener("click", hidingAndShowing);
  });
 // Add hideShowTarget to newly added Task (by addAdjacentHTML);
  const mostRecentTask = accordion.lastChild.querySelector('.accordion-item-trigger');
 mostRecentTask.addEventListener('click', function(e) {                 hideShowTarget(e); 
  });
 // Handle New Node List anew
 const newNodeList = Array.from(acc);
 newNodeList.forEach(item => {
  item.addEventListener("click", function(e) {
  e.stopPropagation();
  hidingAndShowing(item,newNodeList);
  });
 });
});
Steelone D
  • 19
  • 2
Piotr Deja
  • 31
  • 1
  • 6
  • Where is `hidingAndShowing` _added_? Do you expect `hidingAndShowing` and `function(e) { e.stopPropagation(); hidingAndShowing(item,newNodeList); }` to be the same function? Why? – Sebastian Simon Jun 10 '23 at 13:43
  • Ok, I think I understand what you are saying. You mean that function(e) { e.stopPropagation() hidingAndShowing is an anonymous function. – Piotr Deja Jun 10 '23 at 13:53
  • Anonymity doesn’t matter; the _function references_ need to be identical. – Sebastian Simon Jun 10 '23 at 13:54
  • Ok but check out this question https://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working where the guy in OP is writting what would seem two identical function references – Piotr Deja Jun 10 '23 at 13:57
  • The question remains how to pass updated nodeList as a parameter inside addEventListener if I write function like this: item.addEventListener("click", hidingAndShowing); The only option remains to define nodeList CONST inside 'hidingAndShowing' function declaration so that on each evokation nodeList will be 'up to date' – Piotr Deja Jun 10 '23 at 14:07
  • Either way thanks for help – Piotr Deja Jun 10 '23 at 14:10
  • In this case, you can try using [event delegation](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of adding several event listeners — it’s more maintainable and applies to dynamically added elements. See [the tag info](/tags/event-delegation/info) and [this Q&A](/a/34896387/4642212). Then you won’t need to worry about `removeEventListener`; simply use an `if` statement to control whether `hidingAndShowing` should be called or not. – Sebastian Simon Jun 10 '23 at 14:16
  • eventListeners should be added with named function not anon function if you plan to use `removeEventListener()`. Even if you did remove the eventListeners it wouldn't matter because the eventlisteners are added again when `newNodeList` is created. So everytime you add a new task, the older `.accordion-item-trigger` gets an extra identical eventListener. – zer00ne Jun 10 '23 at 14:30
  • @zer00ne I modified my solution a little check out whether it looks better now -> https://codepen.io/Tukoruzi/pen/mdQJPqv – Piotr Deja Jun 10 '23 at 14:41
  • @PiotrDeja Now that you're using named event handlers your eventListeners should have no problem being removed. Unfortunately, at the very end you still add them back. Why would you want to remove the eventListeners anyway? – zer00ne Jun 10 '23 at 19:52

0 Answers0