Récupérer l'élément supprimé avec parentNode.removeChild

Question

Savez-vous comment je pourrais récupérer un élément supprimé avec JavaScript de la manière suivante :

elem1.parentNode.removeChild(elem1);

Answer 1

Écrit dans la Documentation MDN removeChild retournera une référence au nœud enfant supprimé.Utilisation comme ceci:

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

En outre:

Le nœud enfant supprimé existe toujours en mémoire, mais n'est plus partie du DOM.Vous pouvez réutiliser le nœud supprimé plus tard dans votre code, via la Référence d'objet Oldchild.

Answer 2

Sans stocker l'élément dans une variable avant de le supprimer, vous ne pouvez pas annuler un removeChild() appel.Appeler la fonction seule sans affectation la supprimera complètement du DOM et mémoire.

Vous pouvez forcer JavaScript à le stocker en mémoire pour une utilisation/restauration ultérieure en procédant comme suit :

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

L'utilisation de cette dernière syntaxe avec un opérateur d'affectation supprimera l'élément elem1 de la liste d’affichage, mais conservez-le comme référence pour une utilisation ultérieure.

Answer 3

Je devais non seulement obtenir une référence pour le nœud supprimé, mais insérez également le nœud supprimé vers le même emplacement qu'il a été supprimé.En tant que tel, je devais utiliser une pile comme si:

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>