JSFiddle - React, Tailwind, and code Playground

HTML

<form>
	<input type='text' id='input' />
	<input type='button' id='addBtn' value='Add' />
</form>
<ul id="do"> </ul>

JavaScript

var doc = document,
    parentUL = document.getElementById('do'),
    addBtn = document.getElementById('addBtn');

addBtn.addEventListener('click', function() {    
    var input = doc.getElementById('input').value,
        li = doc.createElement('li');
    
    // use innerHTML only to set the conetnt of single DOM item
    li.innerHTML = input + '<span style="cursor: pointer; color: red; margin-left: 20px" > x </span>';
    
    // append only once on every create
    parentUL.appendChild(li);
});

// delegate UL's click to li, by checking target item
parentUL.addEventListener('click', function(evt) {
    // check the real target
    var target = evt.target,
        liNode = target.parentNode;
    parentUL.removeChild(liNode);
});