JSFiddle - React, Tailwind, and code Playground

by Sudoku Lovor

HTML

<body>
    <ul class="todo-list">
        <li>
            Love is here
        </li>
        <li>
            Love is here as well
        </li>
        <li>
        </li>
    </ul>
</body>

CSS

ul {
      list-style: none;
      }

JavaScript

(function() {
    el = document.getElementsByTagName('li');
    for (var i = 0; i < el.length; i++) {
        el[i].addEventListener('dblclick', editItem);
    }

}())

function editItem(e) {
    var input = document.createElement('input');
    var test = document.getElementById('edit')
    if (!test) {
        var el = e.target;
        var parent = el.parentNode;
        console.log('this is parent ' + parent);
        input.id = 'edit';
        input.value = el.innerText;
        parent.replaceChild(input, el);
        input.focus();
        input.addEventListener('keypress', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                el.innerText = input.value;
                parent.replaceChild(el, input);
            }
        })
        input.addEventListener('blur', function(e) {
            parent.replaceChild(el, input);
        })
    }
}