运行子事件时删除事件之前的事件

Question

在这个例子中，当我点击按钮时有两个警告，如何在点击按钮时移除event divExamp而只有一个警告。

<button id="abc">sdfsdfsdf</button>
<div id="example">zczczxczxc</div>

<script>
let divExamp = document.querySelector('#example');
document.querySelector('#abc').addEventListener('click', async e =>{
    divExamp.insertAdjacentHTML('beforeend', '<button id="click">click</button>');   
    document.querySelector('#click').addEventListener('click', async e =>{
        alert('click!');
    })
})
</script>

Answer 1

​

let divExamp = document.querySelector('#example');
let abc = document.querySelector('#abc');

abc.addEventListener('click', temp);

function temp(e) {
  abc.removeEventListener('click', temp);
  divExamp.insertAdjacentHTML('beforeend', '<button id="click">click</button>');
  document.querySelector('#click').addEventListener('click', e => {
    alert('click!');
  });
}

<button id="abc">sdfsdfsdf</button>
<div id="example">zczczxczxc</div>

​