Javascript 现在如何删除已创建和附加的元素

我已经创建了元素“li”，并通过创建它们在其中附加了另外两个元素（div和button）。。现在，当它被附加到DOM中时，我希望它在单击Delete button时也被动态删除，我还抓取了btnid变量中的所有按钮，通过这些按钮可以删除“li”项，但现在我不知道如果我通常添加btnid.addEvent，我如何向这些按钮添加EventListener。。。。。。。然后它抛出错误，因为它还没有定义，因为在动态添加元素之前没有元素

let input=document.querySelector（“#addinput”）
设btn=document.querySelector（“#addbtn”）
让listcontainer=document.querySelector（“#listcontainer”）
让btnid；
btn.addEventListener（'单击'，（）=>{
设inpVal=input.value
如果（inpVal.length！=0）{
让html=`
${inpVal}删除`
listcontainer.innerHTML+=html
btnid=listcontainer.getElementsByTagName（'按钮'）
控制台日志（btnid）；
input.classList.remove（'red'）
}否则{
input.classList.add（'red'）
}
})

文件
书单
搜寻

添加一本新书
添加

您可以使用

document.createElement

来添加元素，您可以在这些元素上添加事件侦听器

const li = document.createElement('li');
li.className = "margin5pxall pad5pxall";
const div = document.createElement('div');
div.textContent = inpVal;
const delBtn = document.createElement('button');
delBtn.className = "btn delete";
delBtn.textContent = "Delete";
li.appendChild(div);
li.appendChild(delBtn);
delBtn.addEventListener("click", function(e){
    listcontainer.removeChild(li);
});
listcontainer.appendChild(li);

演示：

let input=document.querySelector（“#addinput”）
设btn=document.querySelector（“#addbtn”）
让listcontainer=document.querySelector（“#listcontainer”）
让btnid；
btn.addEventListener（'单击'，（）=>{
设inpVal=input.value
如果（inpVal.length！=0）{
const li=document.createElement（'li'）；
li.className=“margin5pxall pad5pxall”；
const div=document.createElement（'div'）；
div.textContent=inpVal；
const delBtn=document.createElement（'button'）；
delBtn.className=“btn delete”；
delBtn.textContent=“删除”；
李.儿童组(分区);；
li.儿童（delBtn）；
delBtn.addEventListener（“单击”，函数（e）{
listcontainer.removeChild（li）；
});
listcontainer.appendChild（li）；
input.classList.remove（'red'）
}否则{
input.classList.add（'red'）
}
})

书单
搜寻

添加一本新书
添加

您只需在

删除按钮上单击
功能，即可使用和
删除
。这样，只有您单击的项目才会被删除

在
onclick（）
函数
中，此
指我们单击的元素

运行下面的代码段以查看它是否正常工作


let input=document.querySelector（“#addinput”）
设btn=document.querySelector（“#addbtn”）
让listcontainer=document.querySelector（“#listcontainer”）
让btnid；
btn.addEventListener（'单击'，（）=>{
设inpVal=input.value
如果（inpVal.length！=0）{
让html=`
${inpVal}删除`
listcontainer.innerHTML+=html
//清晰输入
input.value=“”
//添加类
input.classList.remove（'red'）
}否则{
input.classList.add（'red'）
}
})
//删除项目
函数removeItem（事件）{
event.parentElement.remove（）
}

文件
书单
搜寻

添加一本新书
添加
非常感谢，我是javascript新手，所以我遇到了一个问题。非常感谢，我是javascript新手，所以我遇到了一个问题problem@SamarthMittal别担心。如果我帮了你，你介意把答案提出来吗。谢谢