我在使用 innerHTML 并使用它进行 DOM 操作时遇到问题 [关闭]答案

【问题标题】：I am getting Problem while using innerHTML and do DOM manipulation using that [closed]我在使用 innerHTML 并使用它进行 DOM 操作时遇到问题 [关闭]
【发布时间】：2022-02-09 23:42:58
【问题描述】：

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

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

这是我的 codepen.io 代码链接：

codepen.io/rishabh-2001/pen/VwrZmyG

【问题讨论】：

标签： javascript html css innerhtml

【解决方案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
}

【讨论】：

非常感谢兄弟。我的扩展工作正常。这真的是你的巨大帮助。我终于完成了我的项目。非常感谢！！