Question

我正在Vanilla JS中创建一个基本的待办事项列表，我正在使用Handlebars保持HTML＆amp; JS分开。

在我找到删除方法之前，一切都很顺利。因为我的删除按钮位于我的HTML中，而不是在我的JS中创建，我发现很难从数组中选择和删除项目。

我以为我通过循环遍历它找到了解决方法，但问题是它试图抓住页面加载时的按钮，因此它总是返回一个空数组，因为在页面加载时没有删除按钮因为当时没有添加任何事情。

我也尝试将delete方法放在add方法中来解决这个问题，但这也带来了问题。

简单地说，有人可以给我一个工作删除方法的示例，该方法使用splice从数组中删除相关项。

干杯

HTML

    <input id="add-to-do-value" type="text" placeholder="Add to do">
    <button id="add-to-do">Add</button>
    <div id="to-do-app"></div>
<script type="text/javascript" src="js/handlebars.js"></script>
<script id="to-do-template" type="text/template">
    <ul>
    {{#this}}
        <div>
            <li id={{id}}>
                {{value}}
                <button class="delete-btn" id={{id}}>Delete</button>
            </li>
        </div>
    {{/this}}
    </ul>
</script>
<script type="text/javascript" src="js/app.js"></script>

JS

(function() {

    // Data array to store to dos
    var data =  [];

    // Cache dom
    var toDoApp = document.getElementById('to-do-app');
    var toDoTemplate = document.getElementById('to-do-template');
    var addToDo = document.getElementById('add-to-do');
    var addToDoValue = document.getElementById('add-to-do-value');
    var toDoTemplate = Handlebars.compile(toDoTemplate.innerHTML);

    // Render HTML
    var render =  function() {
        toDoApp.innerHTML = toDoTemplate(data);
    }

    // Add to dos
    var add = function() {
        var toDoValue = addToDoValue.value;
        if(toDoValue) {
            var toDoObj = {
                value: toDoValue,
                id: Date.now(),
            }
        data.push(toDoObj);
        }
        render();
    }

    // Delete to dos
    var deleteBtn = document.querySelectorAll('.delete-btn');
    for(i=0; i<deleteBtn.length; i++) {
        deleteBtn[i].addEventListener("click", function(){
            for(j=0; j<data.length; j++) {
                if(data[j].id == this.id) {
                    data.splice(data[j], 1);
                    render();
                }
            }
        });
    }

    // Bind events
    addToDo.addEventListener("click", add);

})();

Answer 1

您使用Handlebars的事实使整个事情变得不必要复杂。我建议您不要使用innerHTML，但DOM API的其他部分可以轻松访问您需要的元素。对于更复杂的待办事项，我会考虑使用<template>s。

无论如何，您必须绑定事件侦听器以在创建新项目时删除项目（即在add函数中）：

＆＃13;

var todos = [];
var input = document.querySelector('input');
var addButton = document.querySelector('button');
var container = document.querySelector('ul');

var add = function () {
  var content = input.value;
  input.value = '';
  var id = Date.now();
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(content));
  var button = document.createElement('button');
  button.textContent = 'Delete';
  button.addEventListener('click', remove.bind(null, id));
  li.appendChild(button);
  todos.push({ content, id, element: li });
  container.appendChild(li);
};

var remove = function (id) {
  var todo = todos.find(todo => todo.id === id);
  container.removeChild(todo.element);
  todos = todos.filter(t => t !== todo);
};

addButton.addEventListener('click', add);

＆＃13;

<input type="text" placeholder="Add to do">
<button>Add</button>
<ul></ul>

＆＃13;

努力保持HTML和JS分离

1 个答案: