##削除ボタン付きtodoリストの作成
JSで項目を追加し、終わったのを削除していくという簡単なtodoリストを作成したいです。
###削除ボタンをクリックしても項目が削除されません
###ソースコードHTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toDoリストを作る</title> </head> <body> <h1>TODO LIST</h1> <main> <form id="todo-form"> <input type="text"> <button id="btn" type='submit'>追加</button> </form> <!--ここにリストが形成されていく--> <ul id="todo-list"></ul> </main> <script src="todo.js"></script> </body> </html> ###ソースコードJS ```javascript (function(){ 'use strict';var todoForm = document.getElementById('todo-form'); var todoList = document.getElementById('todo-list'); var todoInput = document.querySelector('#todo-form input'); var addItem = function(event){ event.preventDefault(); if(!todoInput.value){ return; } var checkBox = document.createElement('input'); checkBox.type = 'checkbox'; var span = document.createElement('span'); span.textContent = todoInput.value; var label = document.createElement('label'); label.appendChild(checkBox); label.appendChild(span); var del = function(e){ var del_parent = event.target.parentElement; todoList.removeChild(del_parent); }; var delbtn = document.createElement('button'); delbtn.textContent = "削除"; delbtn.addEventListener('click',del); var list = document.createElement('li'); list.appendChild(label); list.appendChild(delbtn); todoList.appendChild(list); todoInput.value =''; }; todoForm.addEventListener('submit',addItem);
})();
###補足情報(言語/FW/ツール等のバージョンなど) var del = function(e){ var del_parent = event.target.parentElement; todoList.removeChild(del_parent); }; var delbtn = document.createElement('button'); delbtn.textContent = "削除"; delbtn.addEventListener('click',del); この二つを書く位置が間違っているのかなと思ってますがわからず.... 初心者で大変恐縮ですがご教示ください。。 よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/08 13:32