Add Item

by Lazaro Contreras

HTML

<input type="label"/>
<button onclick="add()">Add</button>
<div class="list"></div>

CSS

*{
  margin:0;
  padding:0;
}
li{
  position:relative;
  display:block;
  height:20px;
  font-family:helvetica;
  background:#CDCDCD;
  border-top:1px solid white;
  border-bottom:1px solid gray;
}
li a{
  position:absolute;
  display:block;
  top:0;
  bottom:0;
  right:0;
  margin:auto;
  width:20px;
  height:20px;
  line-height:16px;
  background:red;
  color:white;
  text-align:center;
  cursor:pointer;
}

JavaScript

function add(){
	var a = document.createElement('a');
  var li = document.createElement('li');
  var list = document.querySelector('.list');
  var label = document.querySelector('input');
  li.innerHTML = label.value;
  a.innerHTML = 'x';
  a.onclick = function(){
  var li=document.getElementsByTagName('li');
  remove(li[index(this,'a')]);
  }
  li.appendChild(a);
  list.appendChild(li);
}

function remove(e){
	e.remove();
}

function index(obj,type){
    var items=document.getElementsByTagName(type);
    for(var i = 0; i < items.length; i++){
      if(items[i] == obj){
        return i;
      }
    }
}