Pesquisar na Comunidade

Olá, quero criar uma lista de itens montada com js: Onde teremos um campo, e através de click cada valor do input será adicionado num lista. Quero também que seja possível apagar cada item da lista. Fiz dois scripts mas, não estão completos. Alguém pode me ajudar? Exemplo1: Nesse exemplo o único problema é que cada item deveria fica um abaixo do outro. <style> .lista{ border:1px solid red; } </style> <input type="text" id="item"> <button onclick="myFunction()">ADD</button> <p id="demo"></p> <script> var lista = []; document.getElementById("demo").innerHTML = lista; function myFunction() { var item = document.getElementById("item").value; lista.push(item); document.getElementById("demo").innerHTML = "<input type='text' id='i' onclick='myFunctionR()' class='lista' value='" + lista + "'></div>"; } function myFunctionR() { lista.pop(); document.getElementById("demo").innerHTML = "<div onclick='myFunctionR()' class='lista'>" + lista + "</div>"; } </script> Exemplo 2: Nesse exemplo, consegui ter cada item da lista em uma div separadamente, mas não consegui remover um item por vez. <style> .lista{ border:1px solid red; } </style> <script> var i = 1; function escreve(){ var txt_pre_definido = document.getElementById('x').value; var t= document.getElementById("texto").innerHTML += "<div class='lista' id='" +i+ "' onclick='apaga(" +i+ ")'>" + txt_pre_definido+"</div>"; i++; } function apaga(v){ //t.pop(v); document.getElementById(t).innerHTML=""; } </script> <input type="text" id="x" /> <input type="button" value="OK" onclick="escreve()" /> <div id="texto" onclick="apaga();"></div>