JSFiddle - React, Tailwind, and code Playground

by letsGoHawks

HTML

<body>
	<ul id="list"> To do list:
	</ul>
	<form>
	 <input id="addition" type="text"/>
	 <input id="addButton" type="button" value="Add"/>
	</form>
  </body>

JavaScript

$(document).ready(function(){
    $('form').submit(function(event){
		addTo(event);
    });
	
	$('#addButton').on('click', function(event) {
		addTo(event);
	});
    
    $(document).on('click', '.item', function(event) {
		event.preventDefault();
		var reply = prompt("Are you sure you want to delete this todo item?");
		if(reply.toUpperCase() === "YES" || reply.toUpperCase() === "Y") {
			$(this).remove();
		} 
    });
	
	$('#removeAll').click(function(event) {
		event.preventDefault();
		var reply = prompt("Are you sure you want to delete all todo items?");
		if(reply.toUpperCase() === "YES" || reply.toUpperCase() === "Y") {
			$('.item').remove();
		} 
    });
});

function addTo(event) {
	event.preventDefault();
        var toAdd = $('#addition').val();
		if(toAdd.length > 0) {
			var listItem = $('<li class="item">' + toAdd + '</li>');
			var img = $('<img class="delete" src="https://cdn1.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/trash_16x16.gif">'); 
			listItem.append(img);
			$('#list').append(listItem);
			$('#addition').val("")
		} else {
			alert("Cannot add empty list item!");
		}
}