Q&A
前提・実現したいこと
削除機能
ここに質問の内容を詳しく書いてください。
javascriptでTODOリストを作っています。
入力され、追加されたタスクの削除機能を付けたいのですがうまくいきません
`use strict` document.addEventListener('DOMContentLoaded', function() { // 必要なDOM要素を取得。 const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0]; const addTaskTarget = document.getElementsByClassName('addTask-target')[0]; const addTaskValue = document.getElementsByClassName('addTask-value')[0]; //ID用のインデックスを定義 let nextId = 0; const addTask = (task,id) => { // 表のタグを生成する const tableItem = document.createElement('tr'); const addButtonTd = document.createElement('td'); const addButton = document.createElement('button'); const removeButtonTd = document.createElement('td'); const removeButton = document.createElement('button'); // それぞれ作業中、削除という言葉をボタンに入れる addButton.innerText = '作業中'; removeButton.innerText = '削除'; removeButton.addEventListener('click', () => { }) // IDを表示するspan要素を作成して tableItem に追加 const idSpan = document.createElement('span'); idSpan.innerText = id; const idSpanTd = document.createElement('td'); idSpanTd.append(idSpan); const taskSpan = document.createElement('span'); const taskSpanTd = document.createElement('td'); taskSpan.innerText = task; taskSpanTd.append(taskSpan); addButtonTd.append(addButton); removeButtonTd.append(removeButton); tableItem.append(idSpanTd); tableItem.append(taskSpanTd); tableItem.append(addButtonTd); tableItem.append(removeButtonTd); //入力タスクを表示 addTaskTarget.appendChild(tableItem); }; // 追加ボタンに対して、タスク登録イベントを設定 addTaskTrigger.addEventListener('click', () => { const task = addTaskValue.value; addTask(task,nextId ++); addTaskValue.value = ''; }); });
javaスクリプト
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todoリスト</title> </head> <body> <h1>Todoリスト</h1> <p> <input type="radio" name="status" value="1" checked="checked">全て <input type="radio" name="status" value="2">作業中 <input type="radio" name="status" value="3">完了 </p> <table> <thead> <th>ID</th> <th>コメント</th> <th>状態</th> </thead> <tbody class ="addTask-target"></tbody> </table> <h2>新規タスクの追加</h2> <input class="addTask-value" type="text" /> <button class="addTask-trigger" type="button">追加</button> <script src="app.js"></script> </body> </html>
HTML
試したこと
僕の最初の仮説では、テーブルの行を削除したい訳だから、
行を表すtr要素に対して処理を行えば良いのでは？と推測しました。
が反応しなく、またタスク要素を指定して
removeButton.addEventListener('click', () => { addTaskValue.splice(index, 1); addTask(); });
どのように正確に任意の行を指定できるのでしょうか？うまく削除機能を動作させるにはどうすればよいのでしょうか
回答2件
0
削除するだけですよね？
javascript
1removeButton.addEventListener('click', () => { 2 removeButton.closest('tr').remove(); 3}); 4
投稿2021/07/26 01:26
総合スコア115012
0
ベストアンサー
削除ボタンに行番号をdata属性で入れておき、同じ行番号を使ったidをtrに振っておくのが手っ取り早く直感的に処理できると思います。
投稿2021/07/25 23:59
総合スコア80861
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/30 17:30