Recupera l'oggetto cancellato con ParentNode.Removechild

Question

Sai come potrei recuperare un oggetto cancellato con JavaScript nel modo seguente:

elem1.parentNode.removeChild(elem1);

.

Answer 1

Come scritto nel Documentazione MDN removeChild restituirà un riferimento al nodo figlio rimosso.Uso come questo:

var oldChild = element.removeChild(child);
element.removeChild(child);

.

Ulteriori:

.

Il nodo figlio rimosso esiste ancora in memoria, ma non è più parte del dom.Puoi riutilizzare il nodo rimosso più avanti nel tuo codice, tramite il Riferimento dell'oggetto delldchild.

Answer 2

Senza memorizzare l'elemento in una variabile prima di eliminarlo, non è possibile annullare una chiamata removeChild().Chiamare la funzione da solo senza un incarico lo rimuoverà completamente dalla memoria Dom e .

È possibile forzare JavaScript per memorizzarlo in memoria per l'uso / restauro in seguito facendo questo:

var restoration_element = elem1.parentNode.removeChild(elem1);

.

L'utilizzo di quest'ultima sintassi con un operatore di assegnazione rimuoverà l'elemento elem1 dall'elenco di visualizzazione, ma tienilo come riferimento per l'uso in seguito.

Answer 3

Avevo bisogno di non solo ottenere un riferimento per il nodo cancellato, ma inserire anche il nodo cancellato nella stessa posizione da cui è stato cancellato.Come tale, ho dovuto usare una pila come così:

var stack = [];
function removeWithStack() {
    let elem = this,
        parent = elem.parentNode;

    // Note: index here is ES6 only; for ES5 see https://stackoverflow.com/a/23528539/2065702
    let action = {
        "index": Array.from(parent.children).indexOf(elem),
        "parent": parent,
        "elem": parent.removeChild(elem)
    }

    stack.push(action);
}

function popAddStack() {
    let action = stack.pop();
    action.parent.insertBefore(action.elem, action.parent.children[action.index]);
}

.

var ps = document.querySelectorAll("p");

var stack = [];
function removeWithStack() {
	let elem = this,
        parent = elem.parentNode;
    
    // Note: index here is ES6 only; for ES5 see https://stackoverflow.com/a/23528539/2065702
    let action = {
    	"index": Array.from(parent.children).indexOf(elem),
        "parent": parent,
    	"elem": parent.removeChild(elem)
    }
    
    stack.push(action);
}

function popAddStack() {
	let action = stack.pop();
    action.parent.insertBefore(action.elem, action.parent.children[action.index]);
}

document.querySelector("button").onclick = popAddStack;

ps.forEach(function(p) {
	p.onclick = removeWithStack;
});

.

button,
p {
    cursor: pointer;
}

.

<div>
    <p>Test 1</p>
    <p>Test 2</p>
    <p>Test 3</p>
    <p>Test 4</p>
    <p>Test 5</p>
</div>
<button>Undo</button>

.