Placeholder

by mgiuffrida

HTML

<div id="container">
  <div class="item">
    <button class='btn-swap'>Hot swap</button>
    <button class='btn-restore'>Restore</button>
  </div>
  <div class="item"> <button class='btn-swap'>Hot swap</button> <button class='btn-restore'>Restore</button> </div>
  <div class="item"> <button class='btn-swap'>Hot swap</button> <button class='btn-restore'>Restore</button> </div>
  <div class="item"> <button class='btn-swap'>Hot swap</button> <button class='btn-restore'>Restore</button> </div>
  <div class="item"> <button class='btn-swap'>Hot swap</button> <button class='btn-restore'>Restore</button> </div>
  <div class="item"> <button class='btn-swap'>Hot swap</button> <button class='btn-restore'>Restore</button> </div>
</div>

CSS

#container {
  width: 80%;
  border: 1px solid blue;
  padding: 10px;
  height: 300px;
  overflow: scroll;
}
#container > *:not(:last-of-type) {
  margin-bottom: 10px;
  border: 4px solid green;
  border-radius: 8px;
}
.item {
  border: 1px solid red;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.item button {
  height: 30px;
  width: 200px;
}

.removed {
  position: fixed;
  top: 0;
  left: 100px;
}

JavaScript

[].forEach.call(document.querySelectorAll('.btn-swap'), function(btn) {
  btn.addEventListener('click', removeElement);
});
[].forEach.call(document.querySelectorAll('.btn-restore'), function(btn) {
  btn.addEventListener('click', restoreElement);
});

function removeElement(e) {
  if (document.querySelector('#placeholder'))
    return;
  var el = e.target.parentNode;
  var d = document.createElement('div');
  d.id = 'placeholder';
  d.style.cssText = getComputedStyle(el).cssText;
  el.parentNode.insertBefore(d, el);
  el.classList.add('removed');
}

function restoreElement(e) {
  var placeholder = document.querySelector('#placeholder');
  if (!placeholder)
    return;
  var el = e.target.parentNode;
  if (!el.classList.contains('removed'))
	  return;
  el.classList.remove('removed');
  placeholder.remove();
}