Javascript Splice（）方法删除不在索引处的数组结尾

我的函数

removitems（）

是从li元素中的列表项中删除项。目前，我可以从视图中删除该项，但数组拼接方法从数组的末尾而不是索引处删除该元素

我的代码是：

var data = [
    "Tuesday ",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday", 
    "Sunday"
];

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 addItemFunction () {
    const addButton = document.getElementById('addButton');
    const input = document.getElementById('input').value;
    data.push(input);    
    htmlInside(data);  
}

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

function removeItems() {
    const listUl = main.querySelector('ul');
    listUl.addEventListener('click', (event) => {
        if (event.target.tagName == 'BUTTON') {
          let li = event.target.parentNode;
          let ul = li.parentNode;
          ul.removeChild(li);
          var index = data.indexOf(data);
          data.splice(index, 1);
          console.log(data);
        }
      });
}

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

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

    removeButton.addEventListener('click', function () {
        removeItemFunction();
    });

    removeItems();

 }  

var数据=[
“星期二”，
“星期三”，
“星期四”，
“星期五”，
“星期六”，
“星期日”
];
函数项数组（ele）{
让项目=“”；
for（设i=0；i${ele[i]}删除Item`；
}
退货项目；
}
函数addItemFunction（）{
const addButton=document.getElementById（'addButton'）；
常量输入=document.getElementById（'input'）。值；
数据推送（输入）；
htmlInside（数据）；
}
函数removietemfunction（）{
data.pop（数据）；
htmlInside（数据）；
}
函数removitems（）{
const listUl=main.querySelector（'ul'）；
listUl.addEventListener（'单击'，（事件）=>{
如果（event.target.tagName=='BUTTON'）{
让li=event.target.parentNode；
设ul=li.parentNode；
ul.removeChild（李）；
var指数=数据。indexOf（数据）；
数据拼接（索引1）；
控制台日志（数据）；
}
});
}
函数htmlInside（数据）{
让getHtml=`

${itemArray（数据）}

添加项删除项
`
document.querySelector（'.hero'）.innerHTML=getHtml；
addButton.addEventListener（'click'，函数（）{
addItemFunction（）；
});
removeButton.addEventListener（'click'，函数（）{
removeItemFunction（）；
});
removitems（）；
}  

我认为我找不到正确的数据索引。可能是

var index=data.indexOf（此）的问题；数据拼接（索引1）

当I
console.log（index）
its logs-1.
时，问题在于这一行
var index=data.indexOf（data）
您正在检查数据的索引，您应该检查数据数组中元素的索引，因此您应该首先使用类似于
ele=li.textContent
的内容从列表中获取该元素，然后将其传递到单击事件侦听器中的
data.splice（index，1）
中的
数据拼接（index，1）
返回的值。你应该看到的是-1。现在，如果将-1放入拼接中，它将从末端向后开始，在本例中，最后一个元素将被删除

这是因为
.indexOf
方法在未找到任何内容时返回-1，这里就是这种情况。
拼接的第二个参数是要删除的元素数。它正在删除正确的数量，即1
data.indexOf（data）是的，因此我确信我没有正确获取索引。。。我对indexOfSo没有做太多的尝试来阅读这篇文章。看起来您的意图是在单击按钮时，从数据中删除一个值。准确吗？所以我应该查找
元素，然后将其传递到indexOf？但是拼接方法不应该直接从数组中删除吗？是的，它应该，但是它通过传递要删除的元素的索引以及从该索引开始要删除的元素的数量来删除，在您的情况下，传递的是数组的索引，而不是数组中的元素，所以你应该做的是，当你按下移除按钮时，从列表中获取文本内容，这将是你想要从数组中删除的元素，因此你要检查目标列表的文本内容的索引。这有意义吗？是的，但是我已经根据您的建议更改并调整了代码：改为
var ele=li.textContent；var指数=数据指数（ele）；控制台日志（ele）；数据拼接（索引1）以便控制台记录所选的正确项目，但是拼接仍在从数组末尾删除该项。代码中的问题是2首先
li。textContent
返回当天的名称和一些额外的文本，因此我刚刚从字符串中提取了当天的名称，第二个问题是，在数据数组中，周二有一些额外的空间，因此我修复了所有问题这是工作代码是的，这是正确的，我拆分字符串的原因是从字符串中提取日期，您可以使用任何其他方法来实现相同的目标，您可以使用slice、substring或regex，但对于这种情况，我相信最有效的方法是拆分。如果你还有问题，请告诉我