Q&A
ご回答ありがとうございます。
>const tr = obj.target.parentNode.parentNode;
「const」を付加してみたのですが、以下のエラーは消えず表示されてしまっている状況です...
Uncaught TypeError: Cannot read property 'parentNode' of undefined
前提・実現したいこと
現在、Todoアプリを作成しているのですが、削除ボタンを押した際に、レコードが削除される処理を実装したいと考えています。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel=”stylesheet” type="text/css" href="css/kadai-3.css"> 7 <title>課題3</title> 8</head> 9<body> 10 <h1>ToDoリスト</h1> 11 <div> 12 <input type="radio" name="todo_list" id="check_value_left" value="all" >すべて 13 <input type="radio" name="todo_list" id="check_value_middle" value="working" >作業中 14 <input type="radio" name="todo_list" id="check_value_right" value="complete" >完了 15 </div> 16 <table id="task_table"> 17 <thead> 18 <tr> 19 <th>ID</th> 20 <th>コメント</th> 21 <th>状態</th> 22 <th></th> 23 </tr> 24 </thead> 25 <tbody id="task_list"></tbody> 26 </table> 27 <h3>新規タスクの追加</h3> 28 <input type="text" id="task_text"> 29 <button type="submit" id="task_add_button">追加</button> 30</body> 31<script type="text/javascript" src="js/kadai-3.js"></script> 32</html>
js
1'use strict'; 2window.addEventListener('DOMContentLoaded', () => { 3 let id = 0; 4 const todos = []; 5 document.getElementById('task_add_button').addEventListener('click', () => { 6 const taskElem = document.getElementById('task_text'); 7 const taskText = taskElem.value; 8 if(!taskText){ 9 return 10 } 11 const todo = { 12 task: taskText, 13 status: '作業中' 14 } 15 todos.push(todo); 16 displayData(); 17 id += 1; 18 taskElem.value = ''; 19 }); 20 21 const displayData = () => { 22 const tbody = document.getElementById('task_list'); 23 const row = tbody.insertRow(-1); 24 // console.log(row.rowIndex); 25 const tdId = row.insertCell(); 26 const tdComment = row.insertCell(); 27 const tdStateButton = row.insertCell(); 28 const tdDeleteButton = row.insertCell(); 29 const stateButton = createStateButton(); 30 const deleteButton = createDeleteButton(); 31 tdId.textContent = id; 32 tdComment.textContent = todos[id].task; 33 tdStateButton.appendChild(stateButton); 34 tdDeleteButton.appendChild(deleteButton); 35 } 36 37 const createStateButton = () => { 38 const stateButton = document.createElement('button'); 39 stateButton.setAttribute('value', 'working'); 40 stateButton.textContent = todos[id].status; 41 return stateButton 42 } 43 const createDeleteButton = () => { 44 const deleteButton = document.createElement('button'); 45 deleteButton.setAttribute('value', '削除'); 46deleteButton.onclick = deleteRow(this); 47 deleteButton.textContent = '削除'; 48 return deleteButton 49 } 50const deleteRow = (obj) =>{ 51 // tr = obj.parentNode.parentNode; 52 // // trのインデックスを取得して行を削除する 53 // tr.parentNode.deleteRow(tr.sectionRowIndex); 54 console.log(obj); 55 } 56});
試したこと
こちらの記事を参考に、onlickを挿入する処理を挟んでみたのですが、行のオブジェクトが取得出来ずコンソールにオブジェクトの情報を出力することが出来ませんでした。
こちら、何か行を削除する良い方法などありましたら、アドバイス頂けましたら幸いです。
回答2件
0
関数は()をつけることで即時実行されるので、Consoleを見ていくと分かるように
createDeleteButton時に実行されています。
単に下記で良いのでは。
js
1 deleteButton.onclick = deleteRow;
私の手元の方ではこれで「ボタンクリック時」にイベント取得できました。
あとは
js
1 2 console.log(obj.currentTarget);
とでもすれば、「押したボタン自身」が取れます。
投稿2020/12/22 04:06
総合スコア80850
0
deleteRow関数の引数として渡されるのはMouseEventオブジェクトです。
Eventオブジェクトからクリックされた要素を取得するには、Event.targetプロパティを読み取ります。
js
1const deleteRow = (obj) =>{ 2 tr = obj.target.parentNode.parentNode; 3 // trのインデックスを取得して行を削除する 4 tr.parentNode.deleteRow(tr.sectionRowIndex); 5 }
また、宣言してない変数trに代入しようとしているのでまたエラーとなっています。
変数宣言も追加する必要があります。
js
1const deleteRow = (obj) =>{ 2 const tr = obj.target.parentNode.parentNode; 3 // trのインデックスを取得して行を削除する 4 tr.parentNode.deleteRow(tr.sectionRowIndex); 5 }
投稿2020/12/22 07:22
総合スコア112
`console.log(obj)`で何が出力されますか？
現状、エラー出力のみで「console.log(obj)」の結果は表示されていませんでした...
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/22 07:04 編集