いつもお世話になっています。

chrome の Developer tool で input[type="checkbox] の要素を確認すると、
checkbox をクリックして UI 上の check を付け外ししても、
ページ読み込み時に「元々 checked 属性が付いていた input 要素」には checked 属性が付いたまま、
ぺージ読み込み時に「元々 checked 属性が付いていない input 要素」には checked 属性が付きません。

上記理由から、js で、先生が checked 属性がついた input 要素の親要素を削除するコード
（ 49 行目からのコード）

    const lis = document.querySelectorAll('li');
    lis.forEach(li => {
      if (li.children[0].checked) {
        li.remove();
      }
    });

このコードで checked 属性がついた親要素 li 要素を集めて消せる理由がわかりません。

また、上記コードは全ての li 要素を取得して、checked 属性がついてる input 要素の親要素を消去
といった処理をされていますが、
上記コードを下記コード「すべての checked 属性がついた input 要素を取得して親要素を消去する」に書き換えると
purge 処理をしても、ページを再読み込みしないと該当の li 要素が UI 上から削除されません。

    const checkedElements = document.querySelectorAll("input[checked]");
    checkedElements.forEach((checked) => {
      checked.parentElement.remove();
    });

お手数ですが、ご回答お願いします。
質問が 2 つになってしまいました。
必要でしたら、分けて投稿させて頂きます。