How to undo the DOM append() method

Question

function select(){
  document.getElementById('container').style.border="2px solid red";
}
function pick(){
  document.getElementById('container').appendChild(document.getElementById('item'));
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

I want to be able to click the item and it goes to the container div and then I click the item again it goes back to its original place. Can I undo this process? Is there a better way to satisfy the same purpose?

Possible duplicate of [Remove element by id](https://stackoverflow.com/questions/3387427/remove-element-by-id) — Heretic Monkey, Oct 09 '18 at 23:21

score 1 · Answer 1 · answered Oct 09 '18 at 23:29

You can do this:

function select(){
  document.getElementById('container').style.border="2px solid red";
}

// boolean to keep track of the position
var inside = false;
function pick(){
  if(!inside) {
    document.getElementById('container').appendChild(document.getElementById('item'));
    var getMeHere = document.getElementById('getMeBackHere');
    
  } 
  else {
     var pickMe = document.getElementById('container');
     document.getElementById('getMeBackHere').appendChild(document.getElementById('item'));
    
  }
  inside = !inside;
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id = "getMeBackHere"></div>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

Poul Bak · Answer 2 · 2018-10-09T23:31:03.170

You can change your 'pick' function to check whether the item is in the container and if it is, append it back to body, like this:

function pick(){

  var item = doucumentgetElementById('item');
  var container = document.getElementById('container');
  if (item.parentElement == container)
  {
     document.body.appendChild(item);
  }
  else
  {
     container.appendChild(item);
  }
}

On first click item is moved to the container, on second click it's moved back to the body.

score 0 · Answer 3 · answered Oct 09 '18 at 23:21

I would think you could use the parentNode property to check if the item div has the container div as it's parent node, and if it does, append it to the body (or wherever you need it to go). If the item nodes parent is not the container, then append it to the container.

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode

Sphinx · Answer 4 · 2018-10-09T23:30:56.850

Another solution:

save a copy for document.getElementById('container').parentNode.innerHTML, even you can save it into one array, then it can support undo one by one step.

then when reset, assigns it back ( if save multiple copies into one array, assign with last copy then pop it).

Like below demo:

let cloned = []

cloned.push(document.getElementById('container').parentNode.innerHTML)

function select(){
  cloned.push(document.getElementById('container').parentNode.innerHTML)
  document.getElementById('container').style.border="2px solid red";
}
function pick(){
  cloned.push(document.getElementById('container').parentNode.innerHTML)
  document.getElementById('container').appendChild(document.getElementById('item'))
}

function reset(){
  cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[0])
  cloned = [cloned[0]]
}

function undo(){
  cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[cloned.length-1])
  cloned.pop()
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <button onclick="reset()">Reset</button>
    <button onclick="undo()">Undo</button>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

score 0 · Answer 5 · answered Oct 09 '18 at 23:25

function select(){
  document.getElementById('container').style.border="2px solid red";
}
function pick(){
if(document.getElementById('container').contains(document.getElementById('item')))
{
var item = document.getElementById('item').cloneNode(true);
document.getElementById("container").removeChild(document.getElementById('item'));
document.getElementById('example').appendChild(item);
}
else
  document.getElementById('container').appendChild(document.getElementById('item'));
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body id="example">
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

score 0 · Answer 6 · answered Oct 09 '18 at 23:26

I think this is the only way to do that.

var savedElement;

function select(){
  document.getElementById('container').style.border="2px solid red";
  
  document.getElementById('container').removeChild(savedElement);
  
  document.getElementById('container').after(savedElement);
}
function pick() {
  savedElement = document.getElementById('item');
  document.getElementById('container').appendChild(savedElement);
}

#container{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#item{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  background: lightblue;
}

<html>
  <body>
    <p>Select the container and click the item to put it on the container</p>
    <div onclick="select()" id="container">Container</div>
    <br><br>
    <div id="item" onclick="pick()">Pick me</div>
  </body>
</html>

How to undo the DOM append() method

6 Answers6