Javascript 如何从todo应用程序中删除要删除的列表？

我创建了一个待办事项列表应用程序，它运行良好，但只有一个问题，比如我创建了两个列表，我想删除第二个列表，当我单击第二个列表的删除按钮时，它会删除第一个列表而不是第二个列表

这是我的密码，请有人帮我一下，谢谢

script.js

function getAndUpdate() {
  console.log("Updating List...");
  tit = document.getElementById('title').value;

  if (localStorage.getItem('itemsJson') == null) {
    itemJsonArray = [];
    itemJsonArray.push([tit]);
    localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))


  }
  else {
    itemJsonArrayStr = localStorage.getItem('itemsJson')
    itemJsonArray = JSON.parse(itemJsonArrayStr);
    itemJsonArray.push([tit]);
    localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))
  }
  update();


}

function update() {
  if (localStorage.getItem('itemsJson') == null) {
    itemJsonArray = [];
    localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray))
  }
  else {
    itemJsonArrayStr = localStorage.getItem('itemsJson')
    itemJsonArray = JSON.parse(itemJsonArrayStr);
  }



  // Populate the table
  let tableBody = document.getElementById("tableBody");
  let str = "";
  itemJsonArray.forEach((element, index) => {
    str += `
      <tr>
      <th scope="row">${index + 1}</th>
      <td class ="ele">${element[0]}</td> 

      <td class="table-buttons" id="spaning-buttons">   
      <button class="btn btn-sm btn-primary open-modal" id = "open" value="click" onclick = "ShowPopUp()">
      <i class="fa fa-book" aria-hidden="true"></i></button><span>Open</span></td>
      
      <td class="table-buttons" id="margin-padding"><button class="btn btn-sm btn-primary delete-btn" onclick="removeItem()"><i class="fa fa-trash" aria-hidden="true"></i></button><span>Delete</span></td>
      </tr>`;

  });
  tableBody.innerHTML = str;

}

add = document.getElementById("add");
add.addEventListener("click", getAndUpdate);
update();

function removeItem(itemIndex) {
  if (confirm("Do you want to delete?")) {
    console.log("Delete", itemIndex);
    itemJsonArrayStr = localStorage.getItem('itemsJson')
    itemJsonArray = JSON.parse(itemJsonArrayStr);
    // Delete itemIndex element from the array
    itemJsonArray.splice(itemIndex, 1);
    localStorage.setItem('itemsJson', JSON.stringify(itemJsonArray));

    // RemoveLsItem();
    update();
  }
}

函数getAndUpdate（）{ 日志（“更新列表…”）； tit=document.getElementById（'title'）。值； if（localStorage.getItem（'itemsJson'）==null）{ itemJsonArray=[]； itemJsonArray.push（[tit]）； localStorage.setItem（'itemsJson'，JSON.stringify（itemJsonArray）） } 否则{ itemJsonArrayStr=localStorage.getItem（'itemsJson'） itemJsonArray=JSON.parse（itemJsonArrayStr）； itemJsonArray.push（[tit]）； localStorage.setItem（'itemsJson'，JSON.stringify（itemJsonArray）） } 更新（）； } 函数更新（）{ if（localStorage.getItem（'itemsJson'）==null）{ itemJsonArray=[]； localStorage.setItem（'itemsJson'，JSON.stringify（itemJsonArray）） } 否则{ itemJsonArrayStr=localStorage.getItem（'itemsJson'） itemJsonArray=JSON.parse（itemJsonArrayStr）； } //填充表格 让tableBody=document.getElementById（“tableBody”）； 设str=“”； itemJsonArray.forEach（（元素，索引）=>{ str+=` ${index+1} ${element[0]} 打开 删除 `; }); tableBody.innerHTML=str； } add=document.getElementById（“add”）； add.addEventListener（“单击”，获取并更新）； 更新（）； 函数removeItem（itemIndex）{ 如果（确认（“是否要删除？”）{ 日志（“删除”，itemIndex）； itemJsonArrayStr=localStorage.getItem（'itemsJson'） itemJsonArray=JSON.parse（itemJsonArrayStr）； //从数组中删除itemIndex元素 拼接（itemIndex，1）； setItem（'itemsJson'，JSON.stringify（itemJsonArray））； //RemoveLsItem（）； 更新（）； } }

---

所有的问题是您忘记将元素索引传递给

removietem

方法

  <td class="table-buttons" id="margin-padding"><button class="btn btn-sm btn-primary delete-btn" onclick="removeItem(${index})"><i class="fa fa-trash" aria-hidden="true"></i></button><span>Delete</span></td>

删除

所有的问题是您忘记将元素索引传递给

removietem

方法

  <td class="table-buttons" id="margin-padding"><button class="btn btn-sm btn-primary delete-btn" onclick="removeItem(${index})"><i class="fa fa-trash" aria-hidden="true"></i></button><span>Delete</span></td>

删除

var i=1；
函数ADDdata（）{
var text=$（'#txtName'）.val（）；
$（“#列表”）.append（“
”+text+”）；
$（'#编辑'+i）。单击（函数（）{
$（this.prev（）.attr（'contenteditable'，'true'）；
$（this.prev（）.focus（）；
});
$（'#删除'+i）。单击（函数（）{
$（this.parent（）.remove（）；
});
i++；
};
$（函数（）{
$（'添加'）。在（'单击'，添加数据）上；
});


待办事项清单




var i=1；
函数ADDdata（）{
var text=$（'#txtName'）.val（）；
$（“#列表”）.append（“
”+text+”）；
$（'#编辑'+i）。单击（函数（）{
$（this.prev（）.attr（'contenteditable'，'true'）；
$（this.prev（）.focus（）；
});
$（'#删除'+i）。单击（函数（）{
$（this.parent（）.remove（）；
});
i++；
};
$（函数（）{
$（'添加'）。在（'单击'，添加数据）上；
});


待办事项清单



是否可以添加代码段？Localstorage.removeItem（）？是否可以添加代码段？Localstorage.removeItem（）？