削除ボタンの実装方法について

前提

初歩的な質問になります。

現在JavascriptでTodoリストを作成しております。
Javascriptからリストと削除ボタンを生成しましたが
削除ボタンに削除機能を与えるのに、どこにコードを書き始めたらいいのかわかりません・・・
現在は入力フォームに入れた内容のタスクが表示されるとともに
削除ボタンは生成(表示)される状態です。
削除ボタンに機能はついていない状態になります。

イベントリスナーを使って削除機能を実装するには
削除ボタンを生成したコードの中に記述したらよいのでしょうか?

実現したいこと

入力フォームに入れて表示されたタスクを
削除ボタンをクリックして削除したい。

現在はタスク生成とともに削除ボタンも生成(表示)される状態です。
削除ボタンに機能はついていない状態になります。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

//削除ボタンの生成 const createRemoveButton = () => { const remove = document.createElement('td') const removeButton = document.createElement('button') removeButton.innerText = '削除' remove.appendChild(removeButton) return remove; } //タグを追加して出力する関数 const showTaskList = () => { todoLists.innerHTML = ''; tasks.forEach((task, index) => { const todoItem = document.createElement('tr') const todoId = document.createElement('td') const todoTitle = document.createElement('td') todoTitle.innerHTML = task.title todoId.innerHTML = index+1 todoLists.appendChild(todoItem) todoItem.appendChild(todoId) todoItem.appendChild(todoTitle) const statusButton = createStatusButton() todoItem.appendChild(statusButton) todoItem.appendChild(statusButton) const removeButton = createRemoveButton() todoItem.appendChild(removeButton) todoItem.appendChild(removeButton) }) }

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント