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"/>
	 <input id="removeAll" type="button" value="Remove All"/>
	</form>
  </body>

JavaScript

$(document).ready(function(){
    $('form').submit(function(event){
		addTo(event);
    });
	
	$('#addButton').on('click', function(event) {
		addTo(event);
	});
    
    $('.delete').on('click', function(event) { 
		event.preventDefault();
		var reply = confirm("Are you sure you want to delete this todo item?");
		if(reply === true) {
			$(this).closest('.item').remove();
		} 
    });
    
    $('.edit').on('click', function(event) { 
		event.preventDefault();
		$(this).closest('.item').slideDown('fast');
    });
	
	$('#removeAll').on('click', function(event) {
		event.preventDefault();
		var reply = confirm("Are you sure you want to delete ALL todo items?");
		if(reply === true) {
			$('.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/uidesignicons/delete.png">'); 
			var img1 = $('<img width="4%" class="edit" src="https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Modify.png">'); 
			listItem.append(img);
			listItem.append(img1);
			$('#list').append(listItem);
			$('#addition').val("")
		} else {
			alert("Cannot add empty list item!");
		}
}