javaScriptでdata-indexの値を取得したい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
javaScriptでTodoアプリを制作しています。
削除ボタンを押した時に、リストを削除するを実行したく、

<li class="list-index" data-index="0">aaa</li> <li class="list-index" data-index="1">bbb</li> <li class="list-index" data-index="3">ccc</li> のdata-indexのデータを取得する方法を探しています。

liはjavaScriptで生成されています。

発生している問題・エラーメッセージ

今の所、
const data = document.getElementsByClassName("list-index");
でlist-indexを全部取得はしていますが、
クリックしたものだけになっていません。

エラーメッセージ
todo.js:80 Uncaught TypeError: Cannot read properties of undefined (reading 'index')
at HTMLButtonElement.<anonymous> (todo.js:80)
(anonymous) @ todo.js:80

該当のソースコード

  deleteButton.addEventListener("click", () => {
    deleteFromIncompleteList(deleteButton.parentNode);
    const data = document.getElementsByClassName("list-index");
    const dataset = data.dataset.index;
    console.log(data);
    deleteToDo(dataset);
  })

試したこと

indexを指定するためにスコープのそとに書いてみたり、違う関数に入れたりしてみました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

getElementsByClassNameは配列風オブジェクトを返します。なので、一つ目の要素のdata-indexを欲しいならdata[0].dataset.indexと[0]を使ってください。

Comments

[uratarosu]

回答ありがとうございます。
上記で0番目のdata-indexを取得することができました!!
クリックした所のdata-setになるとdata[0]をどのようにしたら入りますでしょうか？

[skys215]

data[0].dataset.setのことでしょうか？