单击函数正在删除JavaScript中不在索引处的本地存储项的末尾

我的当前代码从列表中添加和删除项目，然后用户可以保存列表，我希望用户能够从保存的列表中删除项目，这是通过函数

removietemslocalstorage（）

完成的，但实际情况是，本地存储项目从末尾而不是索引处被删除，对于如何获取localStorage项的索引位置，我有点困惑，这是一个数组。这对我来说更像是一个学习练习的过程

代码是：

let domElements = {
    app: document.createElement('DIV'),
    heading: document.createElement('H1'),
    header: document.createElement('DIV'), 
    hero: document.createElement('DIV'),
    newDiv: document.createElement('DIV'),
    errorMessage: document.createElement('P'),
    grid: document.createElement('DIV'), 
    saveList: document.createElement('UL')
}

function domAttributes() {
    domElements.app.classList.add('app');
    document.body.append(domElements.app);
    domElements.heading.textContent = 'Shopping';
    domElements.newDiv.innerHTML = '<p>This is the text of the element</p>';
    domElements.heading.insertAdjacentElement("afterend", domElements.newDiv);
    domElements.errorMessage.innerHTML= 'Error type something in!';
    domElements.heading.insertAdjacentElement("beforeend", domElements.errorMessage);
    domElements.errorMessage.style.color = 'red';
    domElements.errorMessage.style.display = 'none';
    domElements.app.append(domElements.heading);
    domElements.grid.classList.add('grid');
    domElements.saveList.classList.add('saveUl');
    domElements.app.append(domElements.grid);
}

domAttributes();

var data = [
    "Monday", 
    "Tuesday",
    "Wednesday"
];

let gridItems = [
    '<div id="item1" class="item"></div>',
    '<div id="item2" class="item"></div>'
];

var loopElement = 
    {
        image: `<div class="innerElement">Head Test</div>`,
        name: 'Element'
    };

function gridItemLooper(ele) {
    let items = ''; 
    for (let i = 0; i < ele.length; i++) {
        items += ele[i];
    }
    return items;
}

const gridInnerElement = gridItemLooper(gridItems);        
domElements.grid.innerHTML = gridInnerElement;  

function looper() {
let loopImage = '';
for (let i = 0; i < 1; i++) {
    loopImage += loopElement.image;
    }
    return loopImage;
}    


function heroElement() {
    domElements.hero.textContent = 'Hero';
    domElements.hero.classList.add('hero');
    domElements.hero.innerHTML = '<div class="innerElement">Inner Element</div>';
    domElements.hero.setAttribute(
     "style", "font-size: 32px; font-style: bold; background-color:#000000; color: white; width: 100%; height: auto; padding: 20px; font-family: sans-serif"); 
     domElements.app.append(domElements.hero);
}

function itemArray(ele) {
    let items = ''; 
    for (let i = 0; i < ele.length; i++) {
        items += `<li>${ele[i]} <button type='button' class='removeItem'>Remove Item</button> </li>`;
    }
    return items;
}

function layOut() {
    const ui = heroElement();
}

layOut();

function addItemFunction (ele) {
    const addButton = document.getElementById('addButton');
    const input = document.getElementById('input').value;
    
    if (input.length > 0 ) {
        data.push(input);  
        htmlInside(data); 
        domElements.errorMessage.style.display = 'none';
    } else {
        domElements.errorMessage.style.display = 'block';
    }
    
}

function removeItemFunction() {
    data.pop(data);    
    htmlInside(data);
}

function removeItems() {
    const listUl = domElements.app.querySelector('.listItems');
    listUl.addEventListener('click', (event) => {
        if (event.target.tagName == 'BUTTON') {
          let li = event.target.parentNode;
          let ul = li.parentNode;
          ul.removeChild(li);         
          var ele = li.textContent.split(" ")[0];
          var index = data.indexOf(ele);
          data.splice(index, 1);
          console.log(data); 
        }
      });
}

function removeItemsLocalStorage() {
    const listUl = domElements.app.querySelector('.saveUl');
    listUl.addEventListener('click', (event) => {
        if (event.target.tagName == 'BUTTON') {
          let li = event.target.parentNode;
          let ul = li.parentNode;
          ul.removeChild(li);
          let displayItems = JSON.parse(localStorage.getItem("Shopping List"));
          var ele = li.textContent;
          var index = displayItems.indexOf(ele);
          alert(ele);
          displayItems.splice(index, 1);
          localStorage.setItem('Shopping List', JSON.stringify(displayItems));
        }
    });
}

domElements.app.insertAdjacentElement("beforeend", domElements.saveList);
let displayItems = JSON.parse(localStorage.getItem("Shopping List"));

if (localStorage.length > 0) {
    domElements.saveList.innerHTML = displayArray(displayItems);
}

function saveItems(ele) {
    localStorage.setItem('Shopping List', JSON.stringify(ele));
    let displayItems = JSON.parse(localStorage.getItem("Shopping List"));
    domElements.saveList.innerHTML = displayArray(displayItems);
}

function clearItems(ele) {
    localStorage.clear(ele);
    domElements.saveList.innerHTML = localStorage.getItem('Shopping List');
}

function displayArray(ele) {
    let items = ''; 
    for (let i = 0; i < ele.length; i++) {
        items += `<li>${ele[i]} <button type='button' class='removeItem'>Remove Item</button></li> `;
    }
    return items;
}

function clickEvents() {
    addButton.addEventListener('click', function () {
        addItemFunction();
    });

    removeButton.addEventListener('click', function () {
        removeItemFunction();
    });
    
    saveButton.addEventListener('click', function () {
        saveItems(data);
    });
    clearButton.addEventListener('click', function () {
        clearItems(data);
    });
}

function htmlInside(data){
    let getHtml = `
        <ul class="listItems">
            ${itemArray(data)}    
        </ul>
        <input type='input' id='input'></input><button type='button' id='addButton'>Add item</button><button id='removeButton'>Remove item</button><button id='saveButton'>Save list</button><button id='clearButton'>clear list</button>
    `
    document.querySelector('.hero').innerHTML = getHtml;
    removeItems();
    clickEvents();
 }  
 
 htmlInside(data);
 removeItemsLocalStorage(data);

让家庭元素={
app:document.createElement（'DIV'），
标题：document.createElement（'H1'），
标题：document.createElement（'DIV'），
hero:document.createElement（'DIV'），
newDiv:document.createElement（'DIV'），
errorMessage:document.createElement（'P'），
网格：document.createElement（'DIV'），
存储列表：document.createElement（'UL'）
}
函数domtattributes（）{
domElements.app.classList.add（'app'）；
document.body.append（domElements.app）；
domElements.heading.textContent='Shopping'；
domElements.newDiv.innerHTML='这是元素的文本
'；
国内要素。标题。插入相邻要素（“后”，国内要素。新div）；
doElements.errorMessage.innerHTML='Error type something！'；
domElements.heading.insertadjacemente（“beforeed”，domElements.errorMessage）；
DomeElements.errorMessage.style.color='红色'；
doElements.errorMessage.style.display='none'；
domElements.app.append（domElements.heading）；
doelements.grid.classList.add（'grid'）；
doElements.saveList.classList.add（'saveUl'）；
domElements.app.append（domElements.grid）；
}
domtattributes（）；
风险值数据=[
“星期一”，
“星期二”，
“星期三”
];
让gridItems=[
'',
''
];
var loopElement=
{
图像：`头部测试'，
名称：“元素”
};
函数gridItemLooper（ele）{
让项目=“”；
for（设i=0；i${ele[i]}删除Item`；
}
退货项目；
}
功能布局（）{
常量ui=heroElement（）；
}
布局（）；
函数addItemFunction（ele）{
const addButton=document.getElementById（'addButton'）；
常量输入=document.getElementById（'input'）。值；
如果（input.length>0）{
数据推送（输入）；
htmlInside（数据）；
doElements.errorMessage.style.display='none'；
}否则{
doElements.errorMessage.style.display='block'；
}
}
函数removietemfunction（）{
data.pop（数据）；
htmlInside（数据）；
}
函数removitems（）{
const listUl=doelements.app.querySelector（'.listItems'）；
listUl.addEventListener（'单击'，（事件）=>{
如果（event.target.tagName=='BUTTON'）{
让li=event.target.parentNode；
设ul=li.parentNode；
ul.removeChild（李）；
var ele=li.textContent.split（“”[0]；
var指数=数据指数（ele）；
数据拼接（索引1）；
控制台日志（数据）；
}
});
}
函数removeItemsLocalStorage（）{
const listUl=doelements.app.querySelector（'.saveUl'）；
listUl.addEventListener（'单击'，（事件）=>{
如果（event.target.tagName=='BUTTON'）{
让li=event.target.parentNode；
设ul=li.parentNode；
ul.removeChild（李）；
让displayItems=JSON.parse（localStorage.getItem（“购物清单”）；
var ele=li.textContent；
var索引=displayItems.indexOf（ele）；
警报（ele）；
显示项目.拼接（索引，1）；
setItem（'Shopping List'，JSON.stringify（displayItems））；
}
});
}
domElements.app.insertadjacemente（“beforeend”，domElements.saveList）；
让displayItems=JSON.parse（localStorage.getItem（“购物清单”）；
如果（localStorage.length>0）{
doElements.saveList.innerHTML=displayArray（displayItems）；
}
函数保存项（ele）{
setItem（'Shopping List'，JSON.stringify（ele））；
让displayItems=JSON.parse（localStorage.getItem（“购物清单”）；
doElements.saveList.innerHTML=displayArray（displayItems）；
}
功能clearItems（ele）{
localStorage.clear（ele）；
doElements.saveList.innerHTML=localStorage.getItem（'Shopping List'）；
}
函数显示阵列（ele）{
让项目=“”；
for（设i=0；i${ele[i]}删除Item`；
}
退货项目；
}
函数clickEvents（）{
addButton.addEventListener（'click'，函数（）{
addItemFunction（）；
});
removeButton.addEventListener（'click'，函数（）{
removeItemFunction（）；
});
saveButton.addEventListener（'click'，函数（）{
保存项目（数据）；
});
clearButton.addEventListener（'click'，函数（）{
清除项目（数据）；
});
}
函数htmlInside（数据）{
让getHtml=`

${itemArray（数据）}

添加项目删除项目保存列表清除列表
`
document.querySelector（'.hero'）.innerHTML=getHtml；
removitems（）；
clickEvents（）；
}  
htmlInside（数据
function removeItemsLocalStorage() {
    const listUl = domElements.app.querySelector('.saveUl');
    listUl.addEventListener('click', (event) => {
        if (event.target.tagName == 'BUTTON') {
          let li = event.target.parentNode;
          let ul = li.parentNode;
          ul.removeChild(li);
          let displayItems = JSON.parse(localStorage.getItem("Shopping List"));
          var ele = li.textContent.split(" ")[0];
          var index = displayItems.indexOf(ele);
          displayItems.splice(index, 1);
          localStorage.setItem('Shopping List', JSON.stringify(displayItems));
        }
    });
}