LocalStorage からの削除　To-do List

前提・実現したいこと

簡単なTo-do app を作っています。
ゴミ箱を押したときに、localstorageからその要素を削除したいです。
どういった方法が最適でしょうか。

41~46行目にそのコードを書きたいと考えています。

ソースコード
javascript

const date = document.querySelector('[data-date]')
const what = document.querySelector('[data-what]')
const where = document.querySelector('[data-where]')
const submit = document.querySelector('[data-submit]')

const table = document.querySelector('.table')


let datalists = []

submit.addEventListener('click', e => {
    e.preventDefault()

    let setDate = date.value
    let setWhat = what.value
    let setWhere = where.value

    let tr = document.createElement('tr')
    tr.innerHTML = `
    <th>${setDate}</th><th>${setWhat}</th><th>${setWhere}</th><td><div class="trash"></div></td>
    `
    table.appendChild(tr)

    datalist = {
        data1: setDate,
        data2: setWhat,
        data3: setWhere
    }

    datalists.push(datalist)

    localStorage.setItem('data', JSON.stringify(datalists))

    date.value = ''
    what.value = ''
    where.value = ''

})


41 document.addEventListener('click', e => {
42    if (e.target.classList.contains('trash')){
43        let target = e.target.parentElement.parentElement
44        target.remove()
45    }
46 })



document.addEventListener('DOMContentLoaded', () => {
    const data = localStorage.getItem('data')
    const datapack = JSON.parse(data)

    for(let i = 0; i < datapack.length; i++) {
        datalists.push(datapack[i])
    }
    
    for(let i = 0; i < datapack.length ; i++) {
        let data1 = datapack[i].data1
        let data2 = datapack[i].data2
        let data3 = datapack[i].data3
        let tr = document.createElement('tr')
        tr.innerHTML = `
        <th>${data1}</th><th>${data2}</th><th>${data3}</th><td><div class="trash"></div></td>
        `
        table.appendChild(tr)
    }
})

LocalStorage
[{data1: "2021-03-25", data2: "go back", data3: "home"},…]
0: {data1: "2021-03-13", data2: "go back", data3: "home"}
1: {data1: "2021-04-03", data2: "soccer", data3: "field"}
2: {data1: "2021-04-25", data2: "shopping", data3: "department"}

#試したこと

削除する要素であるtargetがtableの中で何番目かを取得して、それと同じ番号の要素を配列のdatalistsから削除し、
そのdatalistsをlocalstorageに上書きするという方法を試みましたが、targetが何番目にあるのかを
取得する方法が分からず、違う方法を模索せざるを得ませんでした。

この際、tableの中の要素であるtrをqueryselectorAllで取得しましtが、中身は空っぽでした。
他に良い方法はありますでしょうか。

m.ts10806

2021/03/09 08:01

まず、書いては。

Suffenjoying

2021/03/09 10:32

自分でも調べて書いてみてるんですけど、有効な解決方法が思いつかないため投稿しています。

m.ts10806

2021/03/09 10:34

質問内容にその調べて書いたことが伝われば私も指摘していません。書いてないことは誰にも伝わりませんので、具体的に記載してください。

Suffenjoying

2021/03/09 10:45

おっしゃる通りです。私が試した方法を記載します。

行動規範の内容に同意します

回答1件

ベストアンサー

削除する要素であるtargetがtableの中で何番目かを取得して、

短期的には、その方針でよいと思いますよ。
「テーブルを日付の逆順でソートしたい」なんて挙動追加があると困りますけども。

この際、tableの中の要素であるtrをqueryselectorAllで取得しましtが、中身は空っぽでした。

何か実装ミスがあったのでしょう。

document の click イベントハンドラ内で以下のような感じでしょうか。

javascript
1        let target = e.target.parentElement.parentElement
2        // 下の行は見出し専用のtrがあったりすると期待する値にならない
3        const index = [...table.querySelectorAll('tr')].indexOf(target);
4        datalists = datalists.filter((item, i) => i != index);
5        // ここで localStorage に保存?
6        target.remove()