要素を削除(remove)した後に再び同じセレクタの要素を再取得する方法が分からない。

前提・実現したいこと

要素を削除した後に再び同じセレクタの要素を再取得する方法が分からないです。もしMutationObserver以外を使う方法があれば教えていただきたいです。

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

要素を削除した後だとクリックイベントを監視できていない。
つまり要素を消した後にdocument.getElementByClassNameなどで取得できない？

該当のソースコード

js
1let dc=document.getElementsByClassName('ui');
2dc[0].addEventListener('click',function(){                   
3                    console.log('click');
4                    // class 'ui'の要素を2番目に追加して合計2つの'ui'の要素
5                    dc[0].parentElement.insertAdjacentHTML("beforeend",'<input class="ui" type="submit" value="ok">');
6                    // class 'ui'の要素の1番目を削除
7                    dc[0].remove();
8                })

試したこと

原因の予想はセレクタのついた要素を消すのでdocument.getElementByClassNameがリセットされると考えています。なので再取得をしようとおもってMutationObserverを使ってみましたがダメでした。

 let ob=new MutationObserver(function(){
                    dc=document.getElementsByClassName('ui');
                })

let option={
    attributes: true, 
    childList: true, 
    characterData: true 
}

ob.observe(dc[0].parentElement,option);

let dc=document.getElementsByClassName('ui');
dc[0].addEventListener('click',function(){                   
                    console.log('click');
                    // class 'ui'の要素を2番目に追加して合計2つの'ui'の要素
                    dc[0].parentElement.insertAdjacentHTML("beforeend",'<input class="ui" type="submit" value="ok">');
                    // class 'ui'の要素の1番目を削除
                    dc[0].remove();
                })

ここに問題に対して試したことを記載してください。

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

xampp
jquery 3系
chrome

maisumakun

2021/07/06 11:25

なぜ「削除した後に取得する」ことが必要となったのでしょうか？

_akasa

2021/07/06 11:40

要素を出したり消したりするために必要になりました。例えばテキストを編集するとき「編集」ボタンを押し、テキストと編集ボタンを「消して」代わりにキャンセルボタンとテキストフィールドを「出し」キャンセルが押されたらまた最初のテキストと編集するボタンが出るようにするのが目的です。このテキストと編集ボタンの要素とテキストフィールドとキャンセルボタンの要素を出したり消したりしたいです。