オブジェクトリテラルの勉強の為、下記コードを作成しております。
html
1<body> 2 3 <table> 4 <thead> 5 <tr> 6 <th class="id">ID</th> 7 <th class="comment">コメント</th> 8 <th class="remove"></th> 9 </tr> 10 </thead> 11 <tbody id="todoList"> 12 </tbody> 13 </table> 14 15 <h2>リスト表示</h2> 16 <input type="text" id="inputContent"> 17 <button id="addButton">追加</button> 18 19 20 21 <script src="js/main2.js"></script> 22</body>
Javascript
1'use strict'; { 2 3 4 //追加ボタンの要素を取得 5 const addButton = document.getElementById('addButton'); 6 7 //1.<iuput>タグを取得する 8 const inputContent = document.getElementById('inputContent'); 9 10 //2.<tbody>タグを取得する 11 const todoList = document.getElementById('todoList'); 12 13 14 const todos = []; 15 16 // ***** 追加ボタンイベントを押す ***** 17 addButton.addEventListener('click', () => { 18 19 const num = todos.forEach((value, index) => { 20 todos.index // <===== indexを取得する方法が分かりません。 21 }); 22 23 const inputContentValue = inputContent.value; 24 const dlt = '削除'; 25 26 const task = { 27 id: num, 28 comment: inputContentValue, 29 remove: dlt 30 }; 31 32 todos.push(task); 33 34 console.log(todos); 35 36 let tr = document.createElement('tr'); 37 tr.classList.add('addTr'); 38 39 //---- td idエレメントを新規作成 ---- 40 let td = document.createElement('td'); 41 td.classList.add('id'); 42 td.textContent = (num); 43 tr.appendChild(td); 44 //---- td idエレメント終わり ---- 45 46 47 //---- td inputした内容を新規作成 ---- 48 td = document.createElement('td'); 49 td.classList.add('comment'); 50 //tdの中に入れたいモノをセット 51 if (inputContentValue == '') { 52 return false; 53 } else { 54 td.textContent = (inputContentValue); 55 } 56 tr.appendChild(td); 57 //---- td 入力した内容終わり ---- 58 59 60 //---- td 削除を新規作成 ---- 61 td = document.createElement('td'); 62 td.classList.add('remove'); 63 const removeBtn = document.createElement('button'); 64 removeBtn.textContent = (dlt); 65 td.appendChild(removeBtn); 66 tr.appendChild(td); 67 //---- td 削除ボタン終わり ---- 68 69 todoList.appendChild(tr); 70 //▲▲▲▲ エレメントをtbody内に追加 ▲▲▲▲ 71 72 73 //●●●● 削除イベントボタン ●●●● 74 removeBtn.addEventListener('click', () => { 75 const element1 = document.querySelector('.addTr'); 76 element1.parentNode.removeChild(element1); 77 todos.length = 0; // <=== todos全てが消えてしまう。。 78 }); 79 //●●●● 削除イベントボタン終わり ●●●● 80 81 }); 82 // ***** 追加ボタン終わり ***** 83 // use strictの終わり 84} 85
分からない点が3点ありまして、教えて頂きたいです。
【質問1】
idの部分に、forEachのインデックス番号を取得する形で、0, 1, 2と表示したいのですが
その方法が分かりません。
【質問2】
この状態で、例えば、'おか'の行の削除ボタンを押すと、何故か'あい'の行が消えてしまいます。
【質問3】
【質問2】に関連しますが、'おか'の行の削除ボタンを押した時は、'おか'のオブジェクトだけ削除するようにしたいです。
お手数をお掛けして申し訳ありません。
何卒宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/03 01:23
2019/09/03 01:30
2019/09/03 01:40
2019/09/03 01:51
2019/09/03 02:11
2019/09/03 02:19
2019/09/03 04:06 編集
2019/09/03 04:09
2019/09/03 04:33