<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.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> <select name="categoria" id="add" > <option value="0">Seleccione Categoria..</option> <option value="1">CATEGORIA 1</option> <option value="6">CATEGORIA 2</option> <option value="5">CATEGORIA 3</option> <option value="4">CATEGORIA 4</option> </select> <select name="nivel" id="addNivel" > <option value="0">Sin Nivel</option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> </select> <input type="button" id="addbtn" name="addbtn" value="Add" class="btn btn-primary btn-sm" /> </div> </div> <div class="form-group container-listado"> <h6>List:</h6> <hr> <ul id="list" class="list-group"> </ul> </div> </form> </div> </div> </div>

.container-listado { background-color: #e8e8e8bf; width: 100%; max-height: 200px; overflow: auto; padding-top: 1em; padding-right: 1em; padding-left: 1em; } .list-group-item { position: relative; display: block; padding-top: 0.3em !important; padding-bottom: 0.3em !important; margin-bottom: -1px; background-color: #fff; border: 1px solid rgba(0,0,0,.125); }

var listarr = []; $(document).ready(function(){ $('#addbtn').click(function(){ var newitem =$('#addNivel').val()==0? $('#add :selected').text():$('#add :selected').text() +" - "+ $('#addNivel :selected').text(); var newitemID =$('#addNivel').val()==0? $('#add :selected').val():$('#add :selected').val() +" - "+ $('#addNivel :selected').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(0); $('#addNivel').val(0); return false; }); $('#list').delegate(".listelement", "click", function() { var elemid = $(this).attr('data-id'); $("#"+elemid).remove(); }); });