Q&A
前提・実現したいこと
javascriptでtodolistを作成しています。
登録ボタンで追加した要素を全削除ボタンを押してすべて削除したいです。
for文を使って繰り返し処理のコードは書けたのですが、肝心の中の削除するコードがわからずに書けていません。中の削除するコードにどのような処理を書けばいいのか教えていただきたいです。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"></link> <title>Todolist</title> </head> <body> <header> <h1>Todolist</h1> </header> <div class="container"> <div class="main"> <!-- 登録内容入力 --> <div class="input-area"> <input id="todo" type="text" placeholder="予定"> <input id="money" type="text" placeholder="予算"> <input id="datetime" type="datetime-local"> <input id="place" type="text" placeholder="場所"> <input id="obj" type="text" placeholder="持ち物"> <input id="memo" type="text" placeholder="メモ"> </div> <!-- 登録、削除、一括削除ボタン --> <div class="btn-area"> <button id="addButton" class="btn-1">登録</button> <button id="allDelete" class="btn-2">全削除</button> <button class="btn-3">選択削除</button> </div> <!-- 表 --> <div class="table-area"> <table border="1"> <thead> <th></th> <th>ID</th> <th>予定</th> <th>予算</th> <th>日時</th> <th>場所</th> <th>持ち物</th> <th>メモ</th> <th></th> </thead> <tbody id="tableBody"> </tbody> </table> </div> </div class="main"> </div class="container"> <script src = "app.js"></script> </body> </html> 'use strict'; let todolists = []; const todo = document.getElementById('todo'); const money = document.getElementById('money'); const dt = document.getElementById('datetime'); const place = document.getElementById('place'); const obj = document.getElementById('obj'); const memo = document.getElementById('memo'); const addButton = document.getElementById('addButton'); const tableBody = document.getElementById('tableBody'); const allDelete = document.getElementById('allDelete'); function formatDate(date){ var y = date.getFullYear() var m = ("00" + (date.getMonth() + 1)).slice(-2) var d = ("00" + date.getDate()).slice(-2) var hh = ("00" + date.getHours()).slice(-2) var mm = ("00" + date.getMinutes()).slice(-2) var ss = ("00" + date.getSeconds()).slice(-2) var result = y + "/" + m + "/" + d + " " + hh + ":" + mm + ":" + ss; return result }; addButton.addEventListener('click', () =>{ var datetime = document.getElementById('datetime'); console.log(datetime.value, 'datetime .value'); if(todo.value == ''){ alert('予定を入力してください'); return; }else{ let displayMoney = money.value == '' ? '0' : money.value; let displayDatetime = datetime.value == '' ? '' : formatDate(new Date(datetime.value)); const todoList = { todo: todo.value, money: displayMoney + '円', datetime: displayDatetime, place: place.value, obj: obj.value, memo: memo.value, }; if (todoList) { todolists.push(todoList); todo.value = ''; money.value = ''; datetime.value = ''; place.value = ''; obj.value = ''; memo.value = ''; showTodos(); }; }; }); const showTodos = () => { tableBody.textContent = ''; todolists.forEach((todolist, number) => { const tableRecord = document.createElement('tr'); tableBody.appendChild(tableRecord); const tableCheck = document.createElement('td'); const tableId = document.createElement('td'); const tableTodo = document.createElement('td'); const tableMoney = document.createElement('td'); const tableDatetime = document.createElement('td'); const tablePlace = document.createElement('td'); const tableObj = document.createElement('td'); const tableMemo = document.createElement('td'); const tableAction = document.createElement('td'); tableId.textContent = number + 1; tableTodo.textContent = todolist.todo; tableMoney.textContent = todolist.money; tableDatetime.textContent = todolist.datetime; tablePlace.textContent = todolist.place; tableObj.textContent = todolist.obj; tableMemo.textContent = todolist.memo; tableRecord.appendChild(tableCheck); tableRecord.appendChild(tableId); tableRecord.appendChild(tableTodo); tableRecord.appendChild(tableMoney); tableRecord.appendChild(tableDatetime); tableRecord.appendChild(tablePlace); tableRecord.appendChild(tableObj); tableRecord.appendChild(tableMemo); tableRecord.appendChild(tableAction); tableCheck.appendChild(createCheckbox(tableRecord)); tableAction.appendChild(createDeleteButton(tableRecord)); }); }; const createDeleteButton = (tableRecord) => { const index = tableRecord.rowIndex-1; const deleteButton = document.createElement('button'); deleteButton.textContent = '削除'; deleteButton.addEventListener('click', () => { todolists.splice(index, 1); showTodos() }); return deleteButton; }; const createCheckbox = (tableRecord) => { const checkbox = document.createElement('input'); checkbox.setAttribute('type', 'checkbox'); return checkbox; }; allDelete.addEventListener('click', () =>{ var row = tableBody.rows.length; console.log(row); for(let i=row; i<=0; i--){ // ここのコードがわかりません } });
試したこと
tableBodyを取得してremove関数を使ってみましたが、うまくいきませんでした。
補足情報（FW/ツールのバージョンなど）
VS codeで書いています。
回答1件
0
ベストアンサー
js
1allDelete.addEventListener('click', () => { 2 todolists = []; 3 showTodos(); 4});
で良い気がします。
一次情報である todolists を更新して、それに合わせて表示を更新するということですね。
投稿2021/03/22 08:22
総合スコア21695
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/22 09:11