質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

872閲覧

繰り返し処理を使ってすべての要素を削除したい

higano_0506

総合スコア3

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/03/22 08:17

前提・実現したいこと

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で書いています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

js

1allDelete.addEventListener('click', () => { 2 todolists = []; 3 showTodos(); 4});

で良い気がします。
一次情報である todolists を更新して、それに合わせて表示を更新するということですね。

投稿2021/03/22 08:22

int32_t

総合スコア20663

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

higano_0506

2021/03/22 09:11

回答ありがとうございます。難しく考えていました。削除するというより更新してしまえばよかったのですね、、、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問