イベント名を使用しないjavascriptのドキュメントのすべてのイベントリスナーを削除します。

Question

ドキュメントに追加されたすべてのイベントリスナーを削除する必要があります。
THIS POSTによれば、私はこのような機能を構築しましたが、TypeError: document.parentNode is nullを表示しています！

var msg = document.getElementById('state-msg'); 
 
var button = document.getElementById('removeListener'); 
 
document.addEventListener('keydown', function(e) { 
 
    msg.textContent = 'keydown:' + e.keyCode; 
 
}); 
 

 
document.addEventListener('keyup', function(e) { 
 
    msg.textContent = 'keyup:' + e.keyCode; 
 
}); 
 

 
document.addEventListener('keypress', function(e) { 
 
    msg.textContent += 'keypress:' + e.keyCode; 
 
}); 
 

 
button.addEventListener('click', function(e) { 
 
    var elClone = document.cloneNode(true); 
 
    document.parentNode.replaceChild(elClone, document); 
 
});

Press any key and get the message here: <span id="state-msg"></span> 
 
<button id = "removeListener">RemoveListener</button>

これは、まだ成功に非常に基本的な質問になることはありませができますが、コメントの任意の種類が大幅に感謝されます。

UPDATE：
私もdocument = elNodeを試してみましたが、動作していません。

Answer 1

個人的にはイベントリスナーに名前を付けるので、適切に削除することができます。 私はあなたがしようとしているものを手に入れます。ただし、これはdocumentノードなので、親ノードを見つけることはほとんどありません。 DOMツリーの根源です。 これがイベントリスナーをバインドした特定の要素だった場合は、そのアプローチが有効です。

1. あなたが後で念入りにすべてのイベントリスナーを削除するには、あなたの関数内で使用できるデータ構造内の関数を登録するには、addEventListenerとは、removeEventListenerを拡張することができます。 See this answer for details。
2. さらに別のオプションとして、JQueryに移行しても構わない場合は、JQueryを使用してリスナーをアタッチしてから、単に$(document).off()を使用するとリスナーが削除されます。ネイティブのaddEventListenerメソッドと連携して機能しない可能性があります。