I am getting Problem while using innerHTML and do DOM manipulation using that

Question

I am trying to delete a particular list item <li> from the inner HTML. i gave them proper ID also but I am not able to delete it . How to delete these list items after clicking that cross button?

here is my codepen.io link to the code:

codepen.io/rishabh-2001/pen/VwrZmyG

Answer 1

You are not adding listner to cross button after rendering

function crossBtnListener() {
  let classArr=document.querySelectorAll(".listItem")
  classArr.forEach(itt => {
    itt.addEventListener("click",(e)=>{
      let idFun=e.srcElement.getAttribute("value")
          crossClick(idFun)
    })
  }); 
}

function render(leads){
   let listItem=""
   for(let i=0;i<leads.length;i++)
   {
       let id_="cross-id"+i;
       let click1="crossClick('"+id_+"')";
    //    let click1=`crossClick(${id_})`;
    //    console.log(click1)
      

     listItem+=`
          <li class="inner-li">
              <a target='_blank' href='${leads[i]}'>
                 ${leads[i]}
              </a>
              <i value="${leads[i]}" class="fas fa-times-circle listItem"  id="${id_}"></i>
          </li>
       `
   }
   ulEl.innerHTML=listItem;
  
   crossBtnListener(); //ADDED AFTER RENDERING LIST
}