JSFiddle - React, Tailwind, and code Playground

author(s): Tao Xin

HTML

<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-0.12.4.nomodule.min.js"></script>

CSS

a { cursor: pointer; }

JavaScript

const {a, button, div, input, li, ul} = van.tags

const ListItem = ({text}) => {
  const deleted = van.state(false)
  return van.bind(deleted, d => d ? null : li(
    text, a({onclick: () => deleted.val = true}, "❌"),
  ))
}

const EditableList = () => {
  const listDom = ul()
  const textDom = input({type: "text"})
  return div(
    textDom, " ", button({
      onclick: () => van.add(listDom, ListItem({text: textDom.value})),
    }, "➕"),
    listDom,
  )
}

van.add(document.body, EditableList())