contentEditable <code> being generated without reason

Question

I was developing a block deleter (pressing backspace deletes the block).

In the code I have, there's a block that includes <code>. When I want to remove the tag, I pickup everything inside and place it inside a node outside the DOM

        var replacementTag = document.createElement('p');
        while(block.firstChild){
            replacement.appendChild(codeTag.firstChild);
        }
        codeParent.parentNode.replaceChild(replacementTag, codeParent);

After doing that. All seems to be well. If I go with the DOM inspector, there's the <p> tag where the <code> tag's container (codeOwner, with the <code> tag inside) was.
But
If I type anything, the <code> tag comes back to life (the browser regenerates it) inside the <p> tag I had just made. I don't want that to happen. I don't want that <code> tag to come back unless I tell the browser I want to.

How can I accomplish that?

I've seen this in Chrome although I'm not fully sure how to reproduce it but it seems to be easy to reproduce in firefox.

Here's a working example of it failing.

It's been easiest to test using firefox v.39

To test:

1. Follow the link
2. Wait for some startup execution to run (around 1.5 seconds)
3. Press backspace 2x (1st deletes the TextNode, 2nd gives the order to the js to delete the surrounding html.
4. Type something.

What you just typed has now been surrounded with <code> tags while only the TextNode sorounding the just inputted information should have been generated.