无法删除eventListener

Question

请提供帮助。

有一个代码必须删除eventListener(keydown(，但它不起作用。这是一个代码：

export const createPostSuccessMessage = () => {
const mainPage = document.querySelector('main');
const successTemplate = document.querySelector('#success').content.querySelector('.success');
const successDiv = successTemplate.cloneNode(true);
const successClickListenerAdd = () => {
if (mainPage.lastChild.className === 'success'){
mainPage.removeChild(mainPage.querySelector('.success'));
}
document.removeEventListener('click', successClickListenerAdd)
}
//this one seems not to work, but I don't know why
const successEscListenerAdd = (evt) => {
if (evt.keyCode === 27) {
if (mainPage.lastChild.className === 'success'){
mainPage.removeChild(mainPage.querySelector('.success'));
}
}
document.removeEventListener('keydown', successEscListenerAdd)
}
mainPage.appendChild(successDiv);
document.addEventListener('click', successClickListenerAdd);
document.addEventListener('keydown', successEscListenerAdd);
formReset();
resetMainMarker();
}

export const createPostErrorMessage = () => {
const mainPage = document.querySelector('main');
const errorTemplate = document.querySelector('#error').content.querySelector('.error');
const errorDiv = errorTemplate.cloneNode(true);
const errorClickListenerAdd = () => {
if (mainPage.lastChild.className === 'error'){
mainPage.removeChild(mainPage.querySelector('.error'));
}
document.removeEventListener('click', errorClickListenerAdd)
}
//this one seems not to work, but I don't know why
const errorEscListenerAdd = (evt) => {
if (evt.keyCode === 27) {
if (mainPage.lastChild.className === 'error'){
mainPage.removeChild(mainPage.querySelector('.error'));
}
}
document.removeEventListener('keydown', errorEscListenerAdd)
}
mainPage.appendChild(errorDiv);
document.addEventListener('click', errorClickListenerAdd);
document.addEventListener('keydown', errorEscListenerAdd);

mainPage.querySelector('.error__button').addEventListener('click', (evt) => {
evt.preventDefault();
if (mainPage.lastChild.className === 'error'){
mainPage.removeChild(mainPage.querySelector('.error'));
}
})
}

Answer 1

在addEventListener的第三个参数中使用once选项可能更容易。这确保了该事件只会被监听一次。

document.addEventListener('click', successClickListenerAdd, { once: true });
document.addEventListener('keydown', successEscListenerAdd, { once: true });