Javascript 试图创建一个带有li的按钮，并且它'；它不工作了

我正在尝试使用类似于待办事项列表的数组制作一个杂货店列表应用程序。我有一个添加按钮，还有一个删除按钮，可以从列表中删除一个项目。但现在我正试图使它，以便删除按钮创建与每个李，使每个杂货项目可以有选择地删除。我试了一下，但我不太确定我做错了什么

let addButton=document.getElementById（'add-button'）；
addButton.addEventListener（“单击”，添加）；
让addInput=document.getElementById（'add-input'）；
//let removeButton=document.getElementById（'remove-button'）；
//removeButton.addEventListener（“单击”，删除）；
let groceryList=[
]
函数add（）{
groceryInput=addInput.value；
groceryList.push（groceryInput）；
addInput.value=''；
显示杂货（）；
}
函数删除（事件）{
让位置=event.currentTarget.id；
杂货店列表拼接（位置1）；
显示杂货（）；
}
功能显示杂货（）{
让groceryUl=document.getElementById（'screery-ul'）；
groceryUl.innerHTML=''；
for（设i=0；i

杂货清单
添加

在您的示例中，您调用的是循环范围之外的

i

的递增值

您可以使用与创建列表项标记相同的方法创建按钮，然后使用

将按钮添加到UL元素标记中。insertAdjacentElement（'beforeend'，removeBtn）

然后，您可以使用查看

事件的removeEl函数。target

parentNode和firstChild-->

li

将包含杂货项目及其移除按钮，以从DOM和数组中移除元素

函数删除（事件）{
event.target.parentNode.remove（event.target）
if（groceryList.includes（event.target.parentNode.firstChild.textContent））{
设k=groceryList.indexOf（event.target.parentNode.firstChild.textContent）；
如果（k！=-1）{
杂货店拼接（k，1）；
}
}
显示杂货（）；
}
//以及在displayGroceries（）中创建新元素的for循环
for（设i=0；i

let addButton=document.getElementById（'add-button'）；
addButton.addEventListener（“单击”，添加）；
让addInput=document.getElementById（'add-input'）；
//let removeButton=document.getElementById（'remove-button'）；
//removeButton.addEventListener（“单击”，删除）；
let groceryList=[
]
函数add（）{
groceryInput=addInput.value；
groceryList.push（groceryInput）；
addInput.value=''；
显示杂货（）；
}
函数移除（事件）{
//这将针对按钮的父级LI元素
event.target.parentNode.remove（event.target）
//event.target.parentNode.firstChild.textContent->杂货店商品
if（groceryList.includes（event.target.parentNode.firstChild.textContent））{
//获取索引
设k=groceryList.indexOf（event.target.parentNode.firstChild.textContent）；
如果（k！=-1）{
杂货店拼接（k，1）；
}
}
显示杂货（）；
}
功能显示杂货（）{
让groceryUl=document.getElementById（'screery-ul'）；
groceryUl.innerHTML=''；
for（设i=0；i

.flex显示{
显示器：flex；
对齐项目：开始；
弯曲方向：立柱；
}
李{
列表样式：无；
}
钮扣{
左边距：1 em；
}

杂货清单
添加

它不能作为groceryLi.appendChild（removeButton）工作，您正在为循环调用外部

您已经使用let定义了groceryLi，并且let具有块作用域

将代码移动到内部添加按钮可解决此问题

找到如下显示杂货的固定方法

function displayGroceries() {
  let groceryUl = document.getElementById('grocery-ul');
  groceryUl.innerHTML = "";
  for (let i = 0; i < groceryList.length; i++) {
    let groceryLi = document.createElement("li");
    groceryLi.innerHTML = groceryList[i];
    let removeButton = document.createElement("button");
    removeButton.innerText = "Remove";
    removeButton.addEventListener("click", remove);
    removeButton.id = i;
    groceryLi.appendChild(removeButton);
    groceryUl.appendChild(groceryLi);
  }
}

函数displayGroceries（）{
让groceryUl=document.getElementById（'screery-ul'）；
groceryUl.innerHTML=“”；
for（设i=0；i

displayGroceries（）函数应关闭。

i

变量未在

for

循环之外定义。“未捕获引用错误：未定义i”