JSFiddle - React, Tailwind, and code Playground

by ulysse_bn

HTML

<input type="text" id="todoInput">
<button id="go">add todo</button>
<ul id="list">

</ul>

CSS

.fa.fa-trash-o.de {
  float: right;
}

.fa.fa-trash-o.de::before {
  content: 'X';
}

JavaScript

function deleteItem(event) {
  var el = event.target
  el.parentNode.remove()
}

function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  var icon = document.createElement('i')
  icon.className = 'fa fa-trash-o de'
  icon.addEventListener('click', deleteItem, null)
  newItem.appendChild(text)
  newItem.appendChild(icon)
  document.getElementById("list").appendChild(newItem)
}

document.getElementById("go").addEventListener('click', todoList, null)