努力保持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>