<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6"> <form> <div class="row"> <div class="form-group"> <label>New Item:</label> <input type="text" name="item" id="add"> <input type="button" id="addbtn" name="addbtn" value="Add" class="btn btn-primary btn-sm" /> </div> </div> <div class="form-group"> <h5>List:</h5> <hr> <ul id="list" class="list-group"> </ul> </div> </form> </div> </div> </div>

$(document).ready(function(){ $('#addbtn').click(function(){ var newitem = $('#add').val(); var uniqid = Math.round(new Date().getTime() + (Math.random() * 100)); $('#list').append('<li id="'+uniqid+'" class="list-group-item"><input type="button" data-id="'+uniqid+'" class="listelement" value="X" /> '+newitem+'<input type="hidden" name="listed[]" value="'+newitem+'"></li>'); $('#add').val(''); return false; }); $('#list').delegate(".listelement", "click", function() { var elemid = $(this).attr('data-id'); $("#"+elemid).remove(); }); });