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の他の部分を使用することをお勧めします。より複雑なToDo項目の場合は、<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>