イベントリスナーがうまくいかない

質問

delBtnがない場合にイベントリスナーを読み込むとエラーが出てその後の処理が行われないため
下記のようにあった場合のみ予約するようにしたところ今度はクリックしても実行されない問題が起きました。

読み込み時は、エラーにならないようにし、かつボタンを押したときに要素を削除するようにするにはどうしたらよいでしょうか？

var Result = document.getElementsByClassName('Result')[0].innerHTML = '<span class="u-mr-1rem">あああああ</span><input id="DelBtn" type="button" value="削除">;

var Result = document.createElement('p');
BtnWrap.appendChild(Result);
Result.classList.add('Result　u-mtb-1rem');

var delBtn = document.getElementById('DelBtn');

if(delBtn !== null) {
delBtn.addEventListener('click', function() {
document.getElementsByClassName('Result')[0].remove();
});
}

回答No.1

Proof4

ページ読み込み時からdelBtnが存在しているなら、読み込まれていないDOM要素を取得しようとするのでエラーになっている可能性が高いです。
document.addEventListener('DOMContentLoaded', function(){
　// delBtnのDOM要素取得、イベントリスナ予約などの処理
});
で問題なく動くと思います。

もし、ページ読み込み時には存在していないが、何らかのイベントによってdelBtnが存在するようになるのなら、その「何らかのイベント」をトリガーとしてdelBtnの要素を取得、イベントリスナを予約すれば良いと思われます。

いずれにせよ、if(delBtn !== null)は必要ないでしょう。

お礼

delBtnはクリックした時に作成します。

補足

document.addEventListener('DOMContentLoaded', function(){
var delBtn = document.getElementById('memoDelBtn');

delBtn.addEventListener('click', function() {
document.getElementsByClassName('createResult')[0].remove();
});

});

上記のようにしたところ確かにエラーは出なくなり削除は出来たのですが、
今度は削除後にもう一度textareaにテキストを入れて削除ができないです。

もしかするとDOMContentLoadedとは要素の読み込み時に一回だけ実行するという事なのでしょうか？

もう少し調べてみます。

できれば入れて、textareaの下にその内容を表記して、削除して、
をずっと繰り返し出来るようにしたいです・