eventlistener("blur") and setting outerHTML

Question

I have this code:

function setInfo(id, idelem2) {

        let myElement = document.getElementById(idelem2).outerHTML;
        let test = document.getElementById(idelem2);
        let tag = test.tagName;
        test.outerHTML = "<input id='"+idelem2+"' type='text' autocomplete='off'>";
        let myInput = document.getElementById(idelem2);
        document.getElementById(idelem2).focus();

        function escapeHTML(text) {

            var map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            
            return text.replace(/[&<>"']/g, function(m) { return map[m]; 

            });

        }

        document.addEventListener('mousedown', function(event) {

            myInput.outerHTML = myElement;
            return false;

        })

        myInput.addEventListener('keyup', function(event) {

                if(event.keyCode === 13) {

                    let newvalue = myInput.value;

                    $(document).ready(function() {

                        let post = {};
                        post[id] = newvalue;

                        $.ajax({

                            type: 'POST',
                            url: 'traitements/traitement-profil.php',
                            data: post,
                            dataType: 'text',

                            success: function(data) {

                                if(data != "Operation réussie !") {

                                    let errorWindow = document.getElementById('erreur');

                                    errorWindow.className = "alert alert-danger my-5 text-center";
                                    errorWindow.innerHTML = data;

                                    setTimeout(() => {

                                        errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                    }, 4500);

                                }

                                if(data == "Operation réussie !") {

                                    if(idelem2 == "monSite") {

                                        if(newvalue == "") {

                                            myInput.outerHTML = "<"+tag+" id="+idelem2+">"+"Non renseigné !</"+tag+">";
                                            let errorWindow = document.getElementById('erreur');
                                            errorWindow.className = "alert alert-success my-5 text-center";
                                            errorWindow.innerHTML = data;
                                            setTimeout(() => {

                                                errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                            }, 4500);
                                            
                                            return;

                                        }

                                        myInput.outerHTML = "<a class='text-white' id="+idelem2+" href='"+newvalue+"' target='_blank' >Site personnel</a>";
                                        let errorWindow = document.getElementById('erreur');
                                        errorWindow.className = "alert alert-success my-5 text-center";
                                        errorWindow.innerHTML = data;
                                        setTimeout(() => {

                                            errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                        }, 4500);

                                        return;

                                    }

                                    if(idelem2 == "monGithub") {

                                        if(newvalue == "") {

                                            myInput.outerHTML = "<"+tag+" id="+idelem2+">"+"Non renseigné !</"+tag+">";
                                            let errorWindow = document.getElementById('erreur');
                                            errorWindow.className = "alert alert-success my-5 text-center";
                                            errorWindow.innerHTML = data;
                                            setTimeout(() => {

                                                errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                            }, 4500);

                                            return;

                                        }

                                        myInput.outerHTML = "<a class='text-white' id="+idelem2+" href='https://github.com/"+newvalue+"' target='_blank' >"+newvalue+"</a>";
                                        let errorWindow = document.getElementById('erreur');
                                        errorWindow.className = "alert alert-success my-5 text-center";
                                        errorWindow.innerHTML = data;
                                        setTimeout(() => {

                                            errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                        }, 4500);

                                        return;

                                    }

                                    if(newvalue == "") {

                                        myInput.outerHTML = "<"+tag+" id="+idelem2+">"+"Non renseigné !</"+tag+">";
                                        let errorWindow = document.getElementById('erreur');
                                        errorWindow.className = "alert alert-success my-5 text-center";
                                        errorWindow.innerHTML = data;
                                        setTimeout(() => {

                                            errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                        }, 4500);

                                    } else {

                                        myInput.outerHTML = "<"+tag+" id="+idelem2+">"+newvalue+"</"+tag+">";
                                        let errorWindow = document.getElementById('erreur');
                                        errorWindow.className = "alert alert-success my-5 text-center";
                                        errorWindow.innerHTML = data;

                                        setTimeout(() => {

                                            errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                        }, 4500);
                                    
                                    }
                                    
                                } else {

                                    myInput.outerHTML = myElement;

                                }

                            }

                        });

                    });

            } else if(event.keyCode === 27) {

                myInput.outerHTML = myElement;
                return;

            }

        })
        
    }

Simple explanation is: On my user profile page I have all the infos of the user, with a icon right next to each info. when the user click on the icon, the span containing the info gets transformed into an input.

I give the focus to the input created.
I added a even listener so if the input lost the focus, it changes back into a span. and it quit the function.
I added another event listener so if the user enter something ( or not ) and then press enter, then the new input is treated ( kind of like in a form ) and the input transform back into a span containing the new data. I also add a little window noticing if the change was effective or not which turn back to a display none after 4.5 secs

The problem is that when the user press enter the input does transform back into a span but containing the same data than before. And I get this as a error message in the console:

Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?

I tried to remove the event listener once the enter key is pressed but it still display this error message and don't display the new data into the span when the input transform back into a span.

Notice that I know this code is not protected against html injection. I wrote it in a hurry and didn't take the time to secure it but I will in the future. So, no worries.

Oh and also, note that even if the data doesn't display in the span, the ajax still works perfectly and the data in the database is changed if requirements are meet.