我在使用 innerHTML 时遇到问题并使用它进行 DOM 操作

Question

我正在尝试从内部 HTML 中删除特定列表项

。我也给了他们正确的 ID，但我无法删除它。单击那个十字按钮后如何删除这些列表项？

这是我的 codepen.io link 代码：

codepen.io/rishabh-2001/pen/VwrZmyG

Answer 1

您没有在渲染后向交叉按钮添加侦听器

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
}

我在使用 innerHTML 时遇到问题并使用它进行 DOM 操作

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

html

javascript

css

innerhtml