JSFiddle - React, Tailwind, and code Playground

by kreativgeist

HTML

<div id="container">
<div id="element"></div>
  <div id="eadd">
    Add
  </div>
  <div id="erem">
    Remove
  </div>
</div>

CSS

#element,#erem,#eadd {
  height: 50px;
  width: 100px;
  background-color: red;
  border: solid black 1px;
}

JavaScript

var e;
e = document.getElementById('eadd');
e.addEventListener('click',function (e) {
  alert("eadd");
  var c = document.createElement("div");
		c.id = "element";
		container.appendChild(c);
});

e = document.getElementById('erem');
e.addEventListener('click',function(e) {
	alert("erem");
  var c=document.getElementById('element')
  container.removeChild(c);
  
});

e = document.getElementById('element');
e.addEventListener('click',function(e) {
	alert("element");
});