努力保持HTML和JS分离

Question

我在香草JS中创建了一个基本的待办事项列表，我正在使用把手来保持HTML & JS独立。

一切都很好，直到我来到删除方法。因为我的删除按钮是在我的HTML里面，而不是在我的JS里面创建的，所以我很难从数组中选择和删除项目。

我想我已经找到了解决方法，但它的问题是它试图抓取页面加载按钮，因此它总是返回一个空的数组，因为在页面加载没有删除当时没有添加按钮。

我也试过把add方法里面的delete方法来对付这个，但是这也提出了问题。

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

干杯

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

您使用把手使得整个事情不必要的复杂的事实。我建议您不要使用innerHTML，而是使用DOM API的其他部分，以便能够轻松访问所需的元素。对于更复杂的待办物品，我会考虑使用<template>s。

反正你有当你（在add功能IE）创建新项目的事件监听器绑定去除项目：

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);

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