Getting hold of dynamically generated object with the help of selectors

Question

I am doing this todolist project, where I can create projects and inside each project I would have the ability to add tasks, now the solution I found was to create an array of task object inside of each instance of the project object, I would then single out the project I want to add the tasks to by adding an eventlistener that gives the clicked project a selector id while removing every other ids the other project might have, which makes it so that only a single project can have the id selector in the entire projects array, the issue I found was me being unnable to get a hold of the project with the id selector.

   function populateProject() {
     const projectsdiv = document.querySelector(".projectsdiv");
     let proji = document.createElement("div");
     proji.classList.add("projetstyle");
     let titre = document.createElement("h1");
     titre.textContent = `${latestproject.title}`;
     proji.appendChild(titre);
     let descri = document.createElement("p");
     descri.textContent = `${latestproject.desc}`;
     proji.appendChild(descri);
     proji.addEventListener("click", () => {
       const allProjects = document.querySelectorAll('.projetstyle');
       allProjects.forEach(project => {
         project.removeAttribute("id");
       });
       proji.id = "id";
       console.log(proji);
     });

  projectsdiv.appendChild(proji);
}

above is the populate function that creates projects with the eventlistener at the end

function getProjectById(projectsArray) {
   const clickedProjectId = "id";
   return projectsArray.find(project => project.id === clickedProjectId);
  }

and above also is the function that I wanted for it to single out the selected project and return it, but apparently I don't really know how to mediate the dom element (proji which has the selector) and the objects.

Answer 1

You really need to be consistent on variable names.

I strongly suggest you add ONE eventListener to the container and use the event.target and event.target.closest('.projectstyle') to navigate

const projectsdiv = document.getElementById('projectsdiv');
projectsdiv.addEventListener('click', (e) => {
  const tgt = e.target;
  if (tgt.matches('.delete')) tgt.closest('.projectstyle').remove();
})
const populateProject = (latestproject) => {
  let project = document.createElement('div');
  project.classList.add('projectstyle');
  let title = document.createElement('h1');
  title.textContent = latestproject.title;
  const del = document.createElement('span');
  del.textContent = 'X';
  del.className = 'delete';
  title.appendChild(del)
  project.appendChild(title);
  let description = document.createElement('p');
  description.textContent = latestproject.description;
  project.appendChild(description);
  projectsdiv.appendChild(project);
}
populateProject({
  "title": "Title 1",
  "decription": "Description 1"
})
populateProject({
  "title": "Title 2",
  "decription": "Description 2"
})

h1 {
  display: flex;
  justify-content: space-between;
}

h1 span {
  cursor: pointer;
}

<div id="projectsdiv"></div>