前提・実現したいこと
javascriptでTodolistを作成しています。
追加した予定にはチェックボックスがあり、選択削除ボタンを押下するとチェックが入れられたものだけ消えるようになっています。
しかし今の処理の仕方ですと、見た目上からは確かに消えるのですが、配列から消えないので新たに予定を追加すると
消したはずの予定がまた表示されてしまいます。
そこで、現在選択削除の処理をしている部分についてどう変更するといいかを教えていただきたいです。
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Todo List</title> </head> <body> <div class="title"> <h1 class="center">Todo List</h1> </div> <div class="form"> <span>予定</span><input type="text" id="todo" placeholder="予定を入力"> <span>日時</span><input type="datetime-local" id="date" placeholder="年/月/日"></br> </div> <div class="form"> <span>お金</span><input type="text" id="money" placeholder="金額を入力"> <span>期日</span><input type="datetime-local" id="deadline" placeholder="年/月/日"></br> </div> <div class="form"> <span>持ち物</span><textarea id="item" rows="2"></textarea> <span>メモ</span><textarea id="memo" rows="2"></textarea> </div> <button class="button" id="addButton">登録</button> <button class="button" id="allDelete">全削除</button> <button class="button" id="lifted" >選択解除</button> <button class="button" id="selectDelete">選択削除</button> </div> <table class="table" id="table"> <thead> <tr> <th></th> <th>ID</th> <th>予定</th> <th>日時</th> <th>お金</th> <th>持ち物</th> <th>メモ</th> <th>期日</th> <th></th> </tr> </thead> <tbody id="todo-body"> </tbody> </table> <script src="app.js"></script> </body> </html>
###選択削除の処理
selectDelete.addEventListener('click', () => { const checkedList = document.querySelectorAll(".table [name='check']:checked"); if(checkedList.length == 0) { alert("選択されたものがありません") return; } checkedList.forEach(check => check.closest("tr").remove()); })
###用意した配列
let todolists = [] const todoList = { todo: todo.value, memo: memo.value, date: date.value, money: money.value, deadline: deadline.value, item: item.value } if (todoList) { todolists.push(todoList) todo.value = '' // ⼊⼒されたテキストを空にする memo.value = '' date.value = '' money.value = '' deadline.value = '' item.value = '' showTodos() // showTodosという関数を呼び出す }
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/17 06:02