单击一次按钮onclick属性后将变为null

Question

const searchPage = Handlebars.compile(document.getElementById('GetChannelName').innerHTML);

document.addEventListener('DOMContentLoaded', () => {
  const addButton = document.querySelector("#AddButton");
  const findButton = document.querySelector("#FindButton");
  const channels_div = document.querySelector(".channels");

  //on clicking either, fill the channels div with the searchpage div
  addButton.onclick = () => {

    const addPagehtml = searchPage({"Prompt_text": "Add a Page"});
    channels_div.innerHTML += addPagehtml;
    console.log(addPagehtml)
    //configure button to delete div
    const dismissButton = document.querySelector(".search-channels-dismiss");
    dismissButton.onclick = () => {
      //remove element
      channels_div.querySelector('.search-channels').parentNode.removeChild(channels_div.querySelector('.search-channels'));
    }
  }
})

onclick函数仅工作一次，此后onclick属性变为null。我无法关闭新创建的html并将其重新带回，因为onclick函数现在为null。如何使onclick功能永久保留？