JSFiddle - React, Tailwind, and code Playground

by Nazmus Nasir

HTML

<!-- Easy jQuery - Create a Shopping List - #6 -->
<p>
Welcome to the sixth Easy jQuery Tutorial, part of <a href="https://www.easyprogramming.net">EasyProgramming.net</a>. In this tutorial, we'll create a shopping list that you can add to and remove from pretty easily. 
</p>
<p>
We'll be using event listeners, append, and .remove()
</p>

<form id="shoppingForm">
  <input id="addToList" type="text" /> 
  <button type="submit">Add</button>
</form>

<h2>
  Our Shopping List:
</h2>
<ul id="shoppingList">
  <li>Milk</li>
</ul>

JavaScript

$("#shoppingForm").on('submit', function(e){
	var text = $('#addToList').val();
  $('#shoppingList').append($('<li>').append(text));
  $('#addToList').val('');
  e.preventDefault();
});

$('#shoppingList').on('dblclick', 'li', function(){
	$(this).remove();
});