JSFiddle - React, Tailwind, and code Playground

HTML

hi
<div id="bob" style="width:100px; height:100px; border:1px solid black;">
    <!-- this text should still exist after event listener removal-->
    Some
    <div id="bob2">children</div>
</div>
lo

JavaScript

var div = document.getElementById('bob');
var colours = ['red', 'blue', 'green', 'yellow', 'black', 'orange', 'gray', 'purple', 'brown', 'white'];

function removeListeners(el) {
    var par = el.parentNode;
    var clone = el.cloneNode(false);
    par.replaceChild(clone, el);
    
    for (var index = 0; index < el.childNodes.length; ++index)
        clone.appendChild(el.childNodes[index]);
}

div.addEventListener('click', function() {
    div.style.backgroundColor = colours[Math.floor(Math.random() * colours.length)];
});

//this event should still work after removing the listeners
document.getElementById('bob2').addEventListener('mousemove', function() {
   this.style.color = colours[Math.floor(Math.random() * colours.length)];
});

removeListeners(div);