01 / 03
1つずつ消すのは面倒
前の回では「おわった」を押すと行が消えていた。でもこの章では toggle に変えて、押すと薄くなるだけにしてあるよ。
終わったものがたまってきたら、まとめて消すボタンがほしいよね。ここで querySelectorAll の出番だよ。
複数要素とイベント委譲
INPUT · スライド
おわったものをまとめて消す
01 / 03
1つずつ消すのは面倒
02 / 03
セレクタで「完了したものだけ」を取る
document.querySelectorAll("#list li.is-done") と書くと、is-done クラスが付いた li だけが返ってくるよ。
.is-done は classList.toggle で付け外ししているクラス。押したものにだけ付くから、「おわった」を押した行だけが取れるんだ。
const doneItems = document.querySelectorAll("#list li.is-done")console.log(doneItems.length) // 完了した行の数03 / 03
for...of で全部消す
取ったら、あとは for...of で1つずつ remove() するだけ。
前の章の querySelectorAll と合わせると、条件で絞って、まとめて処理するという形が見えてきたね。これが DOM を扱うときの基本パターンだよ。
for (const item of doneItems) { item.remove()}