JSFiddle - React, Tailwind, and code Playground

by fdietz

HTML

<input id="add" type="text"></input>
<ul id="list">
    <li>item 1 <span class="remove">x</span></li>
    <li>item 2 <span class="remove">x</span></li>
</ul>

</br>
result:
<input id="result" type="text"></input>

CSS

input#add {
 width: 15em;
}

li {
  width: 10em;
  background-color: #ccc;
  margin: 3px;
  padding: 2px;
  border: 1px #bbb solid;
}

li > .remove {
  color: red;
  float: right;
  display: inline;
  cursor: pointer;
  
}

JavaScript

function updateResult() {
    var listValues = $("#list li").map(function(i, n) {
        return $(n).clone().children().remove().end().text();
    }).get().join(",");
    $("#result").val(listValues);
};

$("#add").keyup(function(event) {
    if (event.keyCode == 13) {
        var value = $(event.currentTarget).val();
        $("#add").val("");
        $("#list").append("<li>" + value + " <span class='remove'>x</span></li>");
        updateResult();

    }
});

$(".remove").live("click", function(event) {
    var $li = $(event.currentTarget).closest("li");
    $li.remove();
    updateResult();
    console.log("remove", $(event.currentTarget), $li);
});