javascript 如何删除一个节点并保留节点内的所有内容，包括其子节点的所有事件

怎么做到只删除下方 .child标签，并且保留里面所有的内容和事件

<!DOCTYPE html>
<html lang="en">
<body>
    
    <div class="father">
        文字把节点包围了起来<div class="child">子节点的文字<span>123</span>子节点的文字</div>文字把节点包围了起来
    </div>

    <script>
        document.getElementsByTagName('span')[0].addEventListener('click',()=>{
            console.log('保留span的事件')
        })

        //在下方写具体实现逻辑
         .....
    </script>
</body>
</html>

答应我，以后不要有这么奇怪的要求好吗

    const child = document.getElementsByClassName("child")[0];
    const father = document.getElementsByClassName("father")[0];
    document.getElementsByTagName("span")[0].addEventListener("click", () => {
      console.log("保留span的事件");
      const childInner = child.innerHTML;
      const childOuter = child.outerHTML;
      const fatherInner = father.innerHTML;
      father.innerHTML = fatherInner.replace(childOuter, childInner);
    });

    var child = document.getElementsByClassName('child')[0]
    var father = document.getElementsByClassName('father')[0]
    var content = child.innerHTML
    child.remove()
    father.innerHTML = `文字把节点包围了起来${content}文字把节点包围了起来`
    console.log(content);
    document.getElementsByTagName('span')[0].addEventListener('click',()=>{
      console.log('保留span的事件')
    })

基本思路是这样的，找到child 节点并把其内的子节点拿出来。然后用这个子节点replace father 节点中的child。
代码如下：


father = document.getElementsByClassName("father")[0];
child = document.getElementsByClassName("child")[0];
elements = child.children;
father.replaceChild(elements[0],child);
/** 结果如下
<div class="father">文字把节点包围了起来<span>123</span>文字把节点包围了起来</div>
**/