JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<ul id="list">
    <li class="hidden"><a>item original</a><span>clone</span><span>delete</span></li>
    <li><a>item 1</a><span>clone</span><span>delete</span></li>
    <li><a>item 2</a><span>clone</span><span>delete</span></li>
    <li><a>item 3</a><span>clone</span><span>delete</span></li>
</ul>

CSS

body {
  font-family: sans-serif;
  font-size: 12px;
}
ul a {
  width: 105px;
  margin-right: 5px;
  display: inline-block;
}

li {
  line-height: 1.5em;
}

span {
  border: 1px solid #ddd;
  padding: 1px 5px;
  margin: 2px;
  color: blue;
  cursor: pointer;
  display: inline-block;
}
.hidden { display: none; }

JavaScript

document.getElementById("list").addEventListener("click", function (evt) {
  if (event.target && event.target.tagName === "SPAN") {
    var item = event.target.parentNode.firstChild;
    var action = event.target.innerText;
    if (item) {
      var list = event.target.parentNode.parentNode;
      switch (action) {
        case "clone":
          // list.appendChild(item.parentNode.cloneNode(item));
          var cloned = list.firstElementChild.cloneNode(true);
          cloned.removeAttribute("class");
          cloned.firstElementChild.innerText = "item " + list.children.length;
          list.appendChild(cloned);
          break;
        case "delete":
          list.removeChild(item.parentNode);
          break;
      }
    }
  }
});