unwrap

by Artem

HTML

<div>
  <div class="wrapper">
    <img src="http://www.freeiconspng.com/uploads/allpixm--google-plus-logo-png-13.png">
  </div>
  <div class="button" onclick="unwrap(this)">Remove wrapper</div>
</div>

CSS

.wrapper {
  background: black;
  border: 1px solid red;
  display: inline-block;
  width: 100px;
  height: 100px;
}

img {
  height: 50px;
  width: 50px
}

.button {
  border: 1px solid blue;
  display: inline-block;
  padding: 5px;
  border-radius: 3px;
  background: grey;
}

JavaScript

function unwrap(i) {
  var wrapper = i.parentNode.getElementsByClassName('wrapper')[0];
  if (typeof wrapper === 'undefined') return false;
  i.parentNode.innerHTML = wrapper.innerHTML + i.outerHTML;
  return true;
}