Setraiser,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var input = document.createElement("input"),
title = ["Edit", "Ok"],
list = document.querySelector(".list"),
edit = 0,
li;
function replaceNode(elem) {
var first = elem.firstChild,
button = elem.querySelector("button");
edit ^= 1;
edit ? input.value = first.data : input.data = first.value;
input = elem.replaceChild(input, first);
button.textContent = title[edit];
edit ? elem.firstChild.focus() : li = void 0
}
list.addEventListener("click", function(event) {
var target = event.target,
parent = target.parentNode;
if (target.closest(".edit")) {
if (li && li != parent) replaceNode(li);
li = parent;
replaceNode(li)
}
if (target.closest(".del")) {
if (li && li == parent) replaceNode(li);
list.removeChild(parent)
}
})
});
</script>
</head>
<body>
<ul class="list">
<li>text 1<button class="edit">Edit</button><span class="del">X</span></li>
<li>text 2<button class="edit">Edit</button><span class="del">X</span></li>
<li>text 3<button class="edit">Edit</button><span class="del">X</span></li>
</ul>
</body>
</html>