01 / 03
行ごとにボタンを持たせる
やることが終わったら消したいよね。消すためのボタンは、1行に1つずつ付けるよ。
li を作るのと同じやり方で button も作って、li の中にくっつける。入れ物の中に、その行専用のボタンが入る形だよ。
const done = document.createElement("button")done.textContent = "おわった"item.appendChild(done)やることリストを作る
INPUT · スライド
終わったものを消す
01 / 03
行ごとにボタンを持たせる
02 / 03
自分が入っている行を覚えている
ここがこの回のいちばん面白いところ。ボタンの中に書いた処理は、そのとき作っていた item をそのまま使えるんだ。
1行ふやすたびに item は新しく作られるけれど、そのたびに作られたボタンは「自分と一緒に作られた item」を覚えている。だから「押したその行だけ」が消せるんだよ。
done.addEventListener("click", () => { item.remove()})03 / 03
消すのは remove の一言
item.remove() で、その要素が画面から消える。どこにくっついていたかを自分で調べる必要はないよ。
appendChild が「くっつける」なら、remove は「自分をはがす」。対になる動きだと覚えておこう。