JavaScript　追加要素に対してイベントを追加したい

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6  </head>
7  <style>
8  .button1{
9
10    width:200px;
11    height:100px;
12  }
13  </style>
14  <body>
15
16<button class="button1"id="btn" value="41">正解</button>
17<div id="41"></div>
18
19
20<script type="text/javascript" src="js/main.js">
21
22</script>
23  </body>
24</html>

js
1'use strict';
2{
3var btn = document.getElementById('btn');
4btn.addEventListener('click',()=>{
5
6var answer_id = btn.value;
7
8if(answer_id == 41){
9
10var answer_content = document.getElementById(answer_id);
11
12 answer_content.innerHTML = '<button id="delete' +answer_id  + '"value="41">非表示</button>';
13}
14
15});
16
17//var delete_id = document.getElementById('delete41');
18
19document.querySelector('#delete41').addEventListener('click',()=>{
20console.log(delete_id);
21var answer_content = document.getElementById('41');
22answer_content.remove();
23});
24
25
26}

上記のコードを実行するとコンソールに下記のエラーが出てしまいます。
Uncaught TypeError: Cannot read property 'addEventListener' of null
//エラー行
document.querySelector('#delete41').addEventListener('click',()=>{

これは、#delete41がjsが読み込まれた時には存在しないからエラーが出ているのでしょうか？

// #delete41はボタンクリックによって後から追加しているのですが、この要素に対してもイベントを設定したい場合、jsでどのように書けば良いか分からなかったのでアドバイスいただけると助かります。