JSFiddle - React, Tailwind, and code Playground

by Seetha Chitti

HTML

<div id="notes">Notes...</div>
<ul>
    <li>First</li>
    <li class="active">Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>
<input type="text">
<button>Refresh</button>
<a class="clear" href="#">Clear</a>

JavaScript

// @todo - store the data
var clonedItems = $("li").clone(true);

// allow user to click to remove each item
$("ul").on('click', "li.active",{myStuff:'test'} function() {
   
    $(this).fadeOut(); // or fade?
    
});

$('input').on('keydown',function(evt){
    if(evt.which === 32){
        evt.preventDefault();
    }
});

$("a.clear").one('click',function(){
    $("ul").fadeOut(500, function() {
       $(this).empty(); 
    });
});

// @todo - and clear will wipe out all items
$("a.clear").on('click', function() {
    $("ul").fadeOut(500, function() {
       $(this).empty(); 
    });
});

// @todo - refresh will re-set data
$("button").on('click', function() {
    
    $("ul").empty().append(clonedItems);
    
});

// @todo - delegation