如何通过事件委托删除本地存储的数组中的项目?

问题描述 投票:0回答:1

我想从DOM和数组中删除我单击的项目,我完成了第一部分,将其很好地删除了,但是在数组中,我不确定如何定位该特定项目的ID,而只是删除数组中的第一件事?

我希望有一个提示而不是一个完整的答案:)

谢谢HTML

<!DOCTYPE="html">
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="index.css">
    <script src="https://kit.fontawesome.com/c6015819ca.js" crossorigin="anonymous"></script>
    <title>To do app in JS</title>
    <h1 class='title'>To-do app in JS</h1>
  </head>
<body>
    <div class='app'>
        <div class='header'>
            <img src="./images/header.jpg"/>
            <div id="date">DATA</div>
            <div id="time"></div>
        </div>
        <div id='listTop'>
            <i class="fas fa-sync-alt" id="clear"></i>
            <p id='pClear'>Clear All</p>
        </div>
        <ul id='list'>

        </ul>
        <div class="footer">
            <i class="fas fa-plus-circle" aria-hidden="true" id='addButton'></i>
            <input type="text" id='itemInput' placeholder="Add a to-do" />
        </div>
    </div>

<script src="./index.js"></script>

</body>

JS

function addToDo(toDo, id, done, trash) {
    const text =`
    <li class="item">
        <i class="far fa-check-circle" id='jobComplete'></i>
            <div class="description">${toDo}</div>
        <i class="fas fa-trash-alt" id='deleteItem'></i>
    </li>`;
    const position = "beforeend";
    list.insertAdjacentHTML(position, text);
}

document.addEventListener("keyup", (event) => {
    if(event.keyCode == 13){
        const toDo = input.value;
            if(toDo) {
                addToDo(toDo, id, false, false);
                LIST.push(
                    {
                        name: toDo,
                        id: id,
                        done: false,
                        trash: false
                    }

                );
                console.log(LIST);
                id++;
                input.value = '';

            }
        }
})

clear.addEventListener('click', () => {
    document.getElementById('list');
    list.innerHTML = "";
    LIST = [];
    id = 0;
    console.log(LIST);
    }
)

document.getElementById("addButton").addEventListener('click', (event) =>{
    const toDo = input.value;   
    if(toDo) {
        addToDo(toDo, id, false, false);
        LIST.push(
            {
                name: toDo,
                id: id,
                done: false,
                trash: false
            }

        );
        id++;
        input.value = '';

    }
})

function jobCheck () {

};


list.addEventListener("click", event => {
    if(event.target.className === "fas fa-trash-alt" ) {
        trash = true;
        event.target.parentNode.remove();
        LIST.splice(event.target, 1);
        console.log(LIST);

    }
});

javascript html arrays dom
1个回答
0
投票

尝试array.filter,它接受一个函数,您将一个对象作为参数传递给您,然后返回条件检查的结果。所有真实结果将在结果数组中。

© www.soinside.com 2019 - 2024. All rights reserved.