Question

使用本地存储我已经制作了一个简单易用的列表，可以添加和保存项目。我想删除＆＃39; removeButton＆＃39;单击，但我不知道如何获取列表项的索引，以便我可以使用＆＃39; array.splice＆＃39;从＆＃39; toDoArray＆＃39;中删除该项目。

JSFiddle：https://jsfiddle.net/x1bj8mfp/3/

谢谢！

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>to do</title>
    </head>
    <body>
        <form>
            <input id="itemValue" type="text" placeholder="Add item">
            <button id="addItem" type="button" name="button">Add</button>
        </form>
        <ul id="to-do-list"></ul>
    <script type="text/javascript" src="main.js"></script>
    </body>
</html>

Javacript

// Add item
var toDo = function(){
    var itemValueData = document.getElementById('itemValue').value;
    var valueData = new values(itemValueData);

    // Push items
    toDoArray.push(valueData);

    // Local storage
    localStorage.setItem('todos', JSON.stringify(toDoArray));

    // Remove button
    var removeButton = document.createElement('button');
    removeButton.classList.add('to-do-remove');
    removeButton.innerHTML = "Remove";

    // Print out items
    var listContainer = document.createElement('li');
    listContainer.innerHTML = itemValueData;
    listContainer.appendChild(removeButton);
    toDoList.appendChild(listContainer);

    // Remove item
    removeButton.addEventListener("click", removeItem);
}

addItem.addEventListener("click", toDo);

// Remove item
var removeItem = function(){

};

Answer 1

使用previousSibling作为评论说，你不能在DOM节点上使用indexOf（这不是＆＃34; array-ish＆＃34;实例）

// Remove item
var removeItem = function(e){
  var li = e.target.parentNode

  // get index
  var index = 0
  while (li.previousSibling) {
    li = li.previousSibling
    index++
  }

  toDoArr.splice(index, 1)
};

就我个人而言，我建议您使用Array.prototype.filter代替Array.prototype.splice，例如：

// Remove item
var removeItem = function(e){
  var li = e.target.parentNode
  var text = li.firstChild.wholeText

  todoArr = toDoArr.filter(todo => todo !== text)
};

由于Todo应用程序在JS前端社区中非常有名，它提供了比较各种单页MV *框架的结构化方法，因此您可以通过查看社区工作获得更多见解：TodoMVC

Answer 2

构建每个项目时，可以捕获闭包中的数组索引
如果添加和删除导致完全重建，则您的指示将始终正确

如果您可以使用ES6，我会将其重新编写为类，然后将该类与DOM绑定。

class ToDo {
    constructor(ul) {
        this.items = [];
        this.container = ul;
        this.load();
    }
    build() {
        // empty container (slice is to get around live NodeList)
        const children = Array.prototype.slice.call(this.container.childNodes);
        children.forEach(child => {
            child.parentNode.removeChild(child);
        });
        // re-build list inside container
        this.items.forEach((item, i) => {
            const li = document.createElement('li');
            li.appendChild(document.createTextNode(item));

            const remove = document.createElement('button');
            remove.appendChild(document.createTextNode('remove'));
            remove.addEventListener('click', e => this.remove(i));

            li.appendChild(remove);

            this.container.appendChild(li);
        });
    }
    load() {
        const json = localStorage.getItem('todos') || '[]';
        this.items.length = 0; // same ref lives on!
        this.items.push(...JSON.parse(json));
        this.build();
    }
    save() {
        const json = JSON.stringify(this.items);
        localStorage.setItem('todos', json);
    }
    add(val) {
        this.items.push(val);
        this.save();
        this.build();
    }
    remove(i) {
        this.items.splice(i, 1);
        this.save();
        this.build();
    }
}

然后绑定到DOM

const container = document.getElementById('to-do-list');
const toDo = new ToDo(container);
document.getElementById('addItem').addEventListener('click', e => {
    const val = document.getElementById('itemValue').value;
    toDo.add(val);
    e.preventDefault();
});

DEMO

查找数组索引以删除待办事项列表中的项目

2 个答案: