使用 Javascript 或 jQuery 从文本框输入创建数组，并可以在单击时删除数组元素

Question

If the user enters more words at once, convert them in array elements and show below the textbox with the possibility to remove (on click).

Here is what I tried so far:

 let names = []; let nameInput = document.getElementById("name"); let messageBox = document.getElementById("display"); function insert ( ) { names.push( nameInput.value ); clearAndShow(); } function clearAndShow () { nameInput.value = ""; messageBox.innerHTML = ""; messageBox.innerHTML += "Names: " + names.join(", ") + "<br/>"; }

 <form> <h1>Please enter data</h1> <input id="name" type="text" /> <input type="button" value="Search" onclick="insert()" /> <input type="button" value="Show data" onclick="show()" /> </form> <div id="display"></div>

I'm struggling to make the little border on the output array and to delete them on click. Here is how it should look like:

How it should look like

Answer 1

I believe you can use this site for consultation.https://www.w3schools.com/jsref/

 let names = []; let nameInput = document.getElementById("name"); let messageBox = document.getElementById("display"); function insert ( ) { names.push( nameInput.value ); clearAndShow(); } function clearAndShow () { nameInput.value = ""; messageBox.innerHTML = ""; names.forEach(function(element){ if(element != ''){ var _span = document.createElement('span'); _span.style.borderStyle = "solid" _span.style.width = '50px' _span.appendChild(document.createTextNode(element)) messageBox.appendChild(_span) } }) }

 <form> <h1>Please enter data</h1> <input id="name" type="text" /> <input type="button" value="Search" onclick="insert()" /> <input type="button" value="Show data" onclick="show()" /> </form> <div id="display"></div>