前提
初歩的な質問になります。
現在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 コメント