JSFiddle - React, Tailwind, and code Playground

by Kaushik Ruparel

HTML

<form id="ui">
    <input type="text" placeholder="Your Message" />
    <input type="submit" />
</form>
<ul id="messages"></ul>

JavaScript

// When a user enters text and presses the 
// submit button, add the text they typed 
// into the messages list and clear the 
// input field.

var form = document.getElementById("ui");
var textbox = document.querySelector('input[type="text"]');
var ul = document.getElementById("messages");

var captureSubmit = function (e) {
    e.preventDefault();
    var li = document.createElement("li");
/*    var removeLink = document.createElement("a");
    removeLink.innerText="X";
    li.innerHTML = "<DIV> " + textbox.value + " " + removeLink + "</DIV>";
    console.log( li.innerHTML);
*/
    li.innerText=textbox.value;
    ul.appendChild(li);
};

form.addEventListener('submit',
captureSubmit,
false // use capture method
);

ul.addEventListener("click",function (e) {
    if (ul != e.target){
        ul.removeChild(e.target);
    }
});