Метод Splice () удаляет конец массива не по индексу

Question

Моя функция removeItems() - удалить элементы из элемента списка внутри элемента 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 index = data.indexOf(this); data.splice(index, 1);

, когда я console.log(index) его журналы -1.

Answer 1

Проблема в этой строке var index = data.indexOf(data) вы проверяете индекс данных, вы должны проверить индекс элемента в массиве данных, поэтому вы должны сначала получить этот элемент из списка с чем-то вроде ele=li.textContent и затем передайте его на data.indexOf(ele)

Answer 2

В прослушивателе событий щелчка console.log значение, возвращаемое data.splice(index, 1). Вы должны увидеть -1. Теперь, если вы поместите -1 в стык, он начнется с конца в обратном направлении, в данном случае последний элемент и удалит его.

Это потому, что метод .indexOf возвращает -1, когда ничего не найдено, что является дело здесь.