时间戳

首页 > 解决方案 > 如何在点击事件中删除数组项？香草JS

javascript - 如何在点击事件中删除数组项？香草JS

问题描述

我正在使用 vanilla JS，我可以推送到数组，并从数组中删除最后一项。接下来我试图在点击时删除数组项。我在下面创建的功能有效，但它不正确？我哪里错了？我不想从 DOM 中删除该项目，我宁愿从数组中删除该项目，然后更新 UI 状态。

所以下面的代码：

let someData = [
    'This is some serious data part 2',
    'This is some serious data part 3', 
    'This is some serious data part 4', 
]; 

const loopIt = (data) => {
    let item = '';
    for (let i = 0; i < data.length; i++) {
        item += `<li>${data[i]}<button class='testBtn'>Remove ${i}</button></li>`;
    }
    return item;
}

let getHtml = () => {
    domElem.selector.innerHTML = loopIt(someData);
}

const clickEvents = () => {
    domElem.button.addEventListener ('click', function () {
        let inputData = domElem.input.value;
        if (inputData.length > 0) {
            someData.push(inputData);
        } else {
            alert('no input');
        }
        getHtml();
    });
    domElem.buttonRemove.addEventListener ('click', function () {
        someData.pop();
        getHtml();   
    });
}


const removeArrayItem = () => {
    let queryS = document.querySelectorAll('.testBtn');
        for (let i = 0; i < queryS.length; i++) {
            let index = queryS[i];
            index.addEventListener('click', function () {
                alert(i);
                someData.splice(i, 1);
                console.log(someData);
                getHtml();
            });
        };
}

const init = () => {
    getHtml();
    elemAttributes();
    clickEvents();
    removeArrayItem();
}

let initialise = init();

我removeArrayItem的是

但是有什么地方出了问题？因为第一次单击后 UI 不会更新。

如果我推送项目，我无法在点击时删除它们。

标签： javascriptarrays

解决方案

这与您正在重置innerHTML按钮所在的位置有关。这意味着与事件侦听器的所有绑定都已消失。因此，您必须在每次重新呈现 HTML 或使用事件委托时重置事件侦听器。

事件委托有一个事件侦听器来侦听冒泡的事件。例如：您单击按钮，单击事件会在 DOM 中冒泡并到达您侦听事件的元素。从那里您可以确定单击了哪个元素以及接下来要做什么。这种方法的优点是您正在收听的该元素中的子元素可以是动态的，因此无需考虑即可添加、移动、删除和更改。

在您的loopIt函数中，将i索引传递给按钮中的属性。您不再需要监听按钮本身的点击，因此它需要保存一些数据供事件监听器处理。该value属性非常适合此目的。

const loopIt = (data) => {
    let item = '';
    for (let i = 0; i < data.length; i++) {       // Right here ↓
        item += `<li>${data[i]}<button class="testBtn" value="${i}">Remove ${i}</button></li>`;
    }
    return item;
}

按钮现在知道每次单击按钮时需要拼接的数组索引的索引。

修改removeArrayItem功能。与其监听每个按钮的点击，不如监听父元素上的点击事件，我认为是domElem.selector？

const removeArrayItem = () => {
    domElem.selector.addEventListener('click', function(event) {
        const clickedElem = event.target; // This is the element that fired the click.
        if (clickedElem.classList.contains('testBtn')) {
            const index = clickedElem.value // The index in the array.
            someData.splice(index, 1); // Splice array.
            getHtml(); // Re-render the HTML.
        }
    });
}

这将添加一个事件侦听器并获取 的Event对象，该对象target是触发点击事件的元素。然后它检查它是否有一个包含该类的testBtn类。如果是，它会i从属性中获取索引value，拼接数组并重新渲染 HTML。

试试看。您的点击应该每次都有效。

推荐阅读