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

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

ただいまの
回答率

89.13%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 342

Nobu_Nobuta

score 24

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

<body>

  <table>
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="comment">コメント</th>
        <th class="remove"></th>
      </tr>
    </thead>
    <tbody id="todoList">
    </tbody>
  </table>

  <h2>リスト表示</h2>
  <input type="text" id="inputContent">
  <button id="addButton">追加</button>



    <script src="js/main2.js"></script>
</body>
'use strict'; {


  //追加ボタンの要素を取得
  const addButton = document.getElementById('addButton');

  //1.<iuput>タグを取得する
  const inputContent = document.getElementById('inputContent');

  //2.<tbody>タグを取得する
  const todoList = document.getElementById('todoList');


  const todos = [];

  // ***** 追加ボタンイベントを押す *****
  addButton.addEventListener('click', () => {

    const num = todos.forEach((value, index) => {
      todos.index //  <===== indexを取得する方法が分かりません。
    });

    const inputContentValue = inputContent.value;
    const dlt = '削除';

    const task = {
      id: num,
      comment: inputContentValue,
      remove: dlt
    };

    todos.push(task);

    console.log(todos);

    let tr = document.createElement('tr');
    tr.classList.add('addTr');

    //---- td idエレメントを新規作成 ----
    let td = document.createElement('td');
    td.classList.add('id');
      td.textContent = (num);
    tr.appendChild(td);
    //---- td idエレメント終わり ----


    //---- td inputした内容を新規作成 ----
    td = document.createElement('td');
    td.classList.add('comment');
    //tdの中に入れたいモノをセット
    if (inputContentValue == '') {
      return false;
    } else {
    td.textContent = (inputContentValue);
    }
    tr.appendChild(td);
    //---- td 入力した内容終わり ----


    //---- td 削除を新規作成 ----
    td = document.createElement('td');
    td.classList.add('remove');
    const removeBtn = document.createElement('button');
    removeBtn.textContent = (dlt);
    td.appendChild(removeBtn);
    tr.appendChild(td);
    //---- td 削除ボタン終わり ----

    todoList.appendChild(tr);
    //▲▲▲▲ エレメントをtbody内に追加 ▲▲▲▲


    //●●●● 削除イベントボタン ●●●●
    removeBtn.addEventListener('click', () => {
      const element1 = document.querySelector('.addTr');
      element1.parentNode.removeChild(element1);
      todos.length = 0;  // <=== todos全てが消えてしまう。。
    });
    //●●●● 削除イベントボタン終わり ●●●●

  });
  // ***** 追加ボタン終わり *****
  // use strictの終わり
}

実行して、文字を入力した結果が下記です。
イメージ説明

分からない点が3点ありまして、教えて頂きたいです。

【質問1】
idの部分に、forEachのインデックス番号を取得する形で、0, 1, 2と表示したいのですが
その方法が分かりません。

【質問2】
この状態で、例えば、'おか'の行の削除ボタンを押すと、何故か'あい'の行が消えてしまいます。

【質問3】
【質問2】に関連しますが、'おか'の行の削除ボタンを押した時は、'おか'のオブジェクトだけ削除するようにしたいです。

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

 const todos = [];

として

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

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

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

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

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

とすればよいのでは?

sample

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

<script>
'use strict';
const searchNextId=todos=>{
  var idx=todos.length;
  var ids=todos.map(x=>x.id).sort();
  for(var i=0;i<ids.length;i++){
    if(ids[i]!==i){
      idx=i;
      break;
    }
  }
  return idx;
};
window.addEventListener('DOMContentLoaded', ()=>{
  const inputContent = document.querySelector('#inputContent');
  const todoList = document.querySelector('#todoList');
  const todos = [];
  document.querySelector('#addButton').addEventListener('click', () => {
    const id = searchNextId(todos);
    const comment = inputContent.value;
    const remove = '削除';
    const task = {id,comment,remove};
    todos.push(task);
    let tr = document.createElement('tr');
    tr.classList.add('addTr');
    let td = document.createElement('td');
    td.classList.add('id');
    td.textContent = id;
    tr.appendChild(td);
    td = document.createElement('td');
    td.classList.add('comment');
    td.textContent = comment;
    tr.appendChild(td);
    td = document.createElement('td');
    td.classList.add('remove');
    let removeBtn = document.createElement('button');
    removeBtn.textContent = remove;
    td.appendChild(removeBtn);
    tr.appendChild(td);
    todoList.appendChild(tr);
    removeBtn.addEventListener('click', e => {
      const idx=Array.from(document.querySelectorAll('.remove button')).indexOf(e.target);
      todos.splice(idx,1);
      const element1 = e.target.closest('tr');
      element1.parentNode.removeChild(element1);
      console.log(todos);
    });
    console.log(todos);
  });
});
</script>
  <table>
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="comment">コメント</th>
        <th class="remove"></th>
      </tr>
    </thead>
    <tbody id="todoList">
    </tbody>
  </table>

  <h2>リスト表示</h2>
  <input type="text" id="inputContent">
  <button id="addButton">追加</button>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/03 12:43 編集

    申し訳ありません。
    1点、分からない事があります。

    document.querySelectorAll('.remove button')).indexOf(e.target);

    こちらの.remove buttonですが、どのような定義でしょうか。
    クラス名かとは思うのですが、
    console表示しても、.remove buttonという表示を見つけられませんで、
    イメージが掴めません。。。

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

    キャンセル

  • 2019/09/03 13:09

    > .remove button

    removeクラスのついたHTML要素(この場合tdほか)の中の
    buttonをすべて拾っています。

    > ('click', e => { のe

    クリックをしたときのイベント自身をeという変数(引数?)で拾っています

    キャンセル

  • 2019/09/03 13:33

    明快なご回答ありがとうございます。 removebuttonと思い込んでおりました。
    基礎の基礎ですが、改めて勉強させて頂きました。

    また、eについてのご説明ありがとうございます。
    google検索したところ、いくつか説明がありましたので、そちらも参考に勉強したいと思います。

    キャンセル

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

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る