remove box - basic

vanilla JS

by Arif Ams

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div id="box1">
  <div id="removeBox1">
  <span class="remover">x</span>
  </div>
</div>

<div id="box2">
  <div id="removeBox2">
  <span class="remover">x</span>
  </div>
</div>

<div id="box3">
  <div id="removeBox3">
  <span class="remover">x</span>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);
html, html * {
  font-family: Roboto;
}
#box1 {
  background-color: lightgrey;
  color: white;
  width: 20em;
  height: 20em;
  border-bottom: 1px solid darkgrey;
  padding: 5px;
  margin: 5px;
}
#box2 {
  background-color: purple;
  color: white;
  width: 20em;
  height: 20em;
  border-bottom: 1px solid darkgrey;
  padding: 5px;
  margin: 5px;
}
#box3 {
  background-color: green;
  color: white;
  width: 20em;
  height: 20em;
  border-bottom: 1px solid darkgrey;
  padding: 5px;
  margin: 5px;
}
.remover {
  font-size: 2em;
  margin: 100px 0 0 270px;
}

JavaScript

document.getElementById("removeBox1").addEventListener('click', function() {
  var element = document.getElementById("box1");
  element.parentNode.removeChild(element);
});

document.getElementById("removeBox2").addEventListener('click', function() {
  var element = document.getElementById("box2");
  element.parentNode.removeChild(element);
});

document.getElementById("removeBox3").addEventListener('click', function() {
  var element = document.getElementById("box3");
  element.parentNode.removeChild(element);
});