Javascript 添加列表（使用JS添加）后如何分配图标？

实际上，我想在添加列表项后添加删除图标。我正在使用JS添加列表项。所以我想在添加列表后看到删除图标

const viewList=（）=>{
const listItem=document.getElementById（'list-item'）；
listItem.innerHTML=''；
todoList.forEach（（列表）=>{
const listEl=document.createElement（'li'）；
const{toDo}=list；
让title=list.toDo.text；
listEl.textContent=标题；
追加（listEl）；
});
}

尝试EventListener

---

基本上，在添加

listEL

之后，您的操作方法与创建

listEL

的方法完全相同：

listItem.append(listEl);
// Add icon after
const deleteIcon = //make a delete icon using DOM manipulation code
listItem.append(deleteIcon);

例如，如果您的

删除图标

是

，您可以执行以下操作：

listItem.append(listEl);
// Add icon after
const deleteIcon = document.createElement('li');
deleteIcon.classList.add('delete-icon');
listItem.append(deleteIcon);

---

您可以使用模板文本创建HTML文本，以提供给新

的

innerHTML

属性

要删除列表项，可以引用

的父项

我在

窗口中创建了一个名为
handleRemove
的全局函数。您可以将其设置为每个“删除”按钮上的单击处理程序


const todoList=[
{toDo:{text:'唤醒'}}，
{toDo:{text:'Eat'}}，
{toDo:{text:'进入睡眠状态'}}
]
常量视图列表=（）=>{
const listItem=document.getElementById（'list-item'）；
listItem.innerHTML=''；
forEach（{toDo:{text:title}}）=>
listItem.insertAdjacentHTML（'beforeend'`

${title}
去除

`));
}
视图列表（）；
功能手柄移动（按钮）{
button.closest（'li'）.remove（）；//删除父级

}
.todo项{
边缘底部：0.5em；
}
.待办事项>范围{
显示：内联块；
最小宽度：6em；
}


在js中创建一个具有功能的删除图标，并将其附加到列表中