質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1235閲覧

オブジェクトリテラルのインデックス取得、削除方法

Nobu_Nobuta

総合スコア28

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/09/03 00:51

オブジェクトリテラルの勉強の為、下記コードを作成しております。

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】に関連しますが、'おか'の行の削除ボタンを押した時は、'おか'のオブジェクトだけ削除するようにしたいです。

お手数をお掛けして申し訳ありません。

何卒宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

const todos = [];

として

const num = todos.forEach((value, index) => {

となっているのでからの配列をforEachで回してるので何を取りたいのかわかりません。
(その後pushしているので2回目以降なにか取りたいのでしょうか?)

const element1 = document.querySelector('.addTr');

これは先頭の.addTrを取りに行っています。

javascript

1removeBtn.addEventListener('click', e => { 2 const element1 = e.target.closest('tr');

とすればよいのでは?

sample

ちょっと面倒な処理がはいりますが概ねこんな感じ

javascript

1<script> 2'use strict'; 3const searchNextId=todos=>{ 4 var idx=todos.length; 5 var ids=todos.map(x=>x.id).sort(); 6 for(var i=0;i<ids.length;i++){ 7 if(ids[i]!==i){ 8 idx=i; 9 break; 10 } 11 } 12 return idx; 13}; 14window.addEventListener('DOMContentLoaded', ()=>{ 15 const inputContent = document.querySelector('#inputContent'); 16 const todoList = document.querySelector('#todoList'); 17 const todos = []; 18 document.querySelector('#addButton').addEventListener('click', () => { 19 const id = searchNextId(todos); 20 const comment = inputContent.value; 21 const remove = '削除'; 22 const task = {id,comment,remove}; 23 todos.push(task); 24 let tr = document.createElement('tr'); 25 tr.classList.add('addTr'); 26 let td = document.createElement('td'); 27 td.classList.add('id'); 28 td.textContent = id; 29 tr.appendChild(td); 30 td = document.createElement('td'); 31 td.classList.add('comment'); 32 td.textContent = comment; 33 tr.appendChild(td); 34 td = document.createElement('td'); 35 td.classList.add('remove'); 36 let removeBtn = document.createElement('button'); 37 removeBtn.textContent = remove; 38 td.appendChild(removeBtn); 39 tr.appendChild(td); 40 todoList.appendChild(tr); 41 removeBtn.addEventListener('click', e => { 42 const idx=Array.from(document.querySelectorAll('.remove button')).indexOf(e.target); 43 todos.splice(idx,1); 44 const element1 = e.target.closest('tr'); 45 element1.parentNode.removeChild(element1); 46 console.log(todos); 47 }); 48 console.log(todos); 49 }); 50}); 51</script> 52 <table> 53 <thead> 54 <tr> 55 <th class="id">ID</th> 56 <th class="comment">コメント</th> 57 <th class="remove"></th> 58 </tr> 59 </thead> 60 <tbody id="todoList"> 61 </tbody> 62 </table> 63 64 <h2>リスト表示</h2> 65 <input type="text" id="inputContent"> 66 <button id="addButton">追加</button>

投稿2019/09/03 01:06

編集2019/09/03 02:11
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Nobu_Nobuta

2019/09/03 01:23

早速のご回答ありがとうございます。 forEachで取りにいっている部分ですが、こちらは【質問1】のパーツになります。 最初は空の配列なので、インデックスは0、次は1回ボタンを押すと1、次は2と、なるので、この値をundefinedに反映させたいと思っております。 todos.lengthとすれば良いかとは思うのですが、forEachのインデックス番号を利用出来ないかと思った次第です。 【質問2】ありがとうございます!! 【質問3】分かり辛く申し訳ありません。 画面上のみでなく、コンソール上も、指定したオブジェクトの削除 をするには、どのようにすれば良いでしょうか。。。
yambejp

2019/09/03 01:30

Q1についてはインデックスを取りに行くんじゃないですね const num = todos.length; でよいでしょう。
yambejp

2019/09/03 01:40

ちょっとソースを追っかけてみました データを3回追加すると0,1,2とIDが表示されると思いますが 1番を削除するとidは振り直すのでしょうか?(0,2→0,1) それとも空き番にするのでしょうか? かりに空き番の場合、次に追加すると(0,2,3)となるのでしょうか (0,2,1)と空き番を埋めるのでしょうか?
Nobu_Nobuta

2019/09/03 01:51

(0,2,1)と空き番を埋める形を考えております。 例えばですが、3回追加して、3回削除したら、IDは0から再スタートになるような感じです。
yambejp

2019/09/03 02:11

sampleつけておきました
Nobu_Nobuta

2019/09/03 02:19

ご丁寧なご説明、サンプルご提示ありがとうございます。 勉強させて頂きます!!
Nobu_Nobuta

2019/09/03 04:06 編集

申し訳ありません。 1点、分からない事があります。 document.querySelectorAll('.remove button')).indexOf(e.target); こちらの.remove buttonですが、どのような定義でしょうか。 クラス名かとは思うのですが、 console表示しても、.remove buttonという表示を見つけられませんで、 イメージが掴めません。。。 何卒宜しくお願い致します。
yambejp

2019/09/03 04:09

> .remove button removeクラスのついたHTML要素(この場合tdほか)の中の buttonをすべて拾っています。 > ('click', e => { のe クリックをしたときのイベント自身をeという変数(引数?)で拾っています
Nobu_Nobuta

2019/09/03 04:33

明快なご回答ありがとうございます。 removebuttonと思い込んでおりました。 基礎の基礎ですが、改めて勉強させて頂きました。 また、eについてのご説明ありがとうございます。 google検索したところ、いくつか説明がありましたので、そちらも参考に勉強したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問