dynamic clickable div

by SHELDON PASCIAK

HTML

<section id="wrapper"></section>
<input type="text" id="tagName"/>
<button id="addTag">ADD</button>
<button id="update" style="color:red;">REMOVE</button>
<p id="message"></p>

CSS

.dynamic {  
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */  
    
    cursor: pointer;
    float: left;
    margin: 10px;
    border: 2px solid red;
    background-color: red;
}
.dynamicAnd {
    border: 2px solid green;
    background-color:green;
}
.dynamicOr {
    border: 2px solid yellow;
    background-color:yellow;
}

JavaScript

var classes = ["dynamic","dynamicAnd","dynamicOr"];

$("#wrapper").delegate(".dynamic", "click", function() {  
  var element = this;    
  if (this.classList.length>=classes.length) this.classList="";
  this.classList.add(classes[this.classList.length]);    
  $('#message').html(JSON.stringify(this.classList))    
  //$(this).detach(); //or //this.parentNode.removeChild(this);
}); 

$('#update').click(function() {
  var elms = document.querySelectorAll('#wrapper .dynamic');
  for (var i = 0; i < elms.length; i++) {
  var element = elms[i];
      //elms[i].parentNode.removeChild(elms[i]);
      if (elms[i].classList.length==1) {
        //$(elms[i]).fadeOut(500);
      	elms[i].parentNode.removeChild(elms[i]);
      } else {
        $(elms[i]).fadeOut(333).fadeIn(333);
      }
  }  
});

$('#addTag').click(function(){
  var newTag = $('#tagName').val().trim();
  if (newTag=="") return; 
  var div = $('<div class="dynamic"></div>');       
  div.html($('#tagName').val());    
	$('#tagName').val("");
  div.appendTo('#wrapper');
});