RemoveEventLisenter not working after clicking 'Add New Task' button

30 views Asked by At

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);
  });
 });
});
0

There are 0 answers