How to unlink object elements?

Question

I have the following function

addPerson = function(id, name) {
    people[id] = name;

    console.log(people[id].parentNode); // Exibe corretamente
    console.log(name.parentNode); // Exibe corretamente

    name.parentNode.removeChild(name);

    console.log(people[id].parentNode); // Deixa de exibir
    console.log(name.parentNode); // Deixa de exibir

    if(!name.previousElementSibling) {
        $(name.parentNode).append(name);
    }else{
        name.previousElementSibling.insertAfter(name);
    }
};

--

The parameter name reference an element in DOM, when the function is called people[id] receives this element, but when executing some example delete element change, the reference loses access to methods, example the parentNode, tried to use the clone of J-query, but it didn’t work.

Is there any way to clone the object, keep the native methods and detach it from the element in the DOM?

Answer 1

You don’t need to clone the element unless you need multiple equals.
You can use var semPai = el.parentElement.removeChild(el); and you get the "in hand" element out of the DOM.

var div = document.querySelector('div');
var btn = div.firstElementChild;
btn.addEventListener('click', function() {
  console.log('Clicado!');
});

var semPai = btn.parentElement.removeChild(btn);
console.log(div.children.length); // vazio
console.log(semPai.parentNode); // sem pai!

btn.click();

<div><button>Clica-me</button>
</div>

If you need to know the initial position I suggest you create an object to store this information like this:

var objs = [];

var div = document.querySelector('div');
var btn = div.firstElementChild;
btn.addEventListener('click', function() {
  console.log('Clicado!');
});

// guardar para mais tarde
objs.push({
  el: btn,
  previousSibling: btn.previousElementSibling || {},
  parent: btn.parentElement
});

btn.parentElement.removeChild(btn);
console.log(div.children.length); // 0 => vazio
console.log(btn.parentNode); // null => sem pai! está fora do DOM

// depois mais tarde...
objs[0].parent.insertBefore(objs[0].el, objs[0].previousSibling.nextSibling);

<div><button>Clica-me</button>
</div>