JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul contenteditable="true" id="editor">
   <li>
     <span>
       Press enter
     </span>
   </li>
</ul>

CSS

li:before {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAABgCAMAAAA6hOw0AAAAaVBMVEX///8AAADIyMiUlJT29vbo6OgqKioFBQVgYGCcnJy4uLj8/Pz5+flkZGS7u7vx8fGxsbFvb29/f3+jo6Pc3NxBQUFpaWmJiYkjIyPBwcHT09M7OztQUFBWVlaqqqpGRkYzMzMVFRUcHBw1SfS9AAACI0lEQVRoge2a25aCMAxFC8Iocr/JiIjo/3/kwDC0KRZqJb7MynlrsGdrm+JaSRl7lh8XUdJ6RsqTY+0GCrNnxVF6sd7UI8xdnX9x2r9r/6cyWvOvbxvtR7WL65Oi+Pe61EqAvXV9oCoFwEP079U85VWGC+hXKv4woEdIvwJ5iUaVcJPnD69Zf0aNlLRV+D1zyTjAlx+VkbOU0OsK6tli28pNWMjlFyWfqW9/jLowqEpkI52hWz7G0ufQFhXw5P5GYhBYfKOYyAWI4xBoVZu/SSA1m2Ec8uHdxyGAdd/3/xeOACZIAOh57jeGDx5vHgOFxI/oczPigxANAExP8JWEkKmTxBG7MbaDS4al+D6ZXnxAsPUzX5XD33SP4EOEL+7qfJqwJwIRiEAEIhCBCEQgAhGIQAQiEIEIRCDCPybcYQULswr3mEw7H1QSUUrSo0QlsWQs4YMUj1Bz0wMcdFhFacYqbppJpXu8rRbV+6HS3fDRDQuQi29dMFjSxdpr0JTphrEorY/E7SqFofcbuCIjYIN4bAfUILL92MWwfz41ZRqIyLblbAK9rKk3KrXLLGsXr3qsKIg6yUlkTi4jrOvOLgrXTEXdnu6yTQPgofUJSWtR6j9vLDkvA5w7CFDz/qpz1c8xkuJkVfpZr+umzEf7Sz/zRXlL6YzUzD+sXG1xvHkn3lyp5t3m21mnd1nS/pBor+YMEPecV2l4MFJ4yrxjobpe9ANLKyWh2BCWAgAAAABJRU5ErkJggg==');
  display: block;
  float: left;
  content: "";
   width: 18px;
   height: 18px;
   background-size: 100%;
}
li {
  list-style: none;
  margin-bottom: 14px;
    height: 22px;
    position: relative;
    width: 99%;
}
li.checked:before {
  background-image:...

JavaScript

$(document).ready(function(){
   $(document).on('click', 'ul li',  function(){
     var $this = $(this);
     $this.toggleClass('checked');

   })
    $(document).on('click', 'ul li span',  function(e){
     e.stopPropagation();
   })
   $(document).on('keyup', function(e){
      if (e.which == 13) {

    }
   })
   
   $(document).keypress(function(e) {
    if(e.which == 13) {
        var thisItem = $("ul li");
        var test = thisItem.hasClass("checked");
        if(thisItem.hasClass("checked")) {
        debugger;
           thisItem.next().removeClass("checked");
        }
        
    }
});
 
});