How do I get my unordered list items counter to work in jquery?

How do I get my unordered list items counter to work in jquery?


Hello there!! I created a to do list with a delete button on the right side of each list item. 
When you type an entry it goes into the ul tag listing everything. 

How do I get the " counter " of my unordered list items to dynamically reflect both added and deleted items from my " to do list "?
I basically need a numeric value displayed in my id called " counter ".

I have been working on this for a few days and I just do not know what to do. 
Maybe there is something I am over looking that is so simple.

Need help asap please.

  2. ==============================================================

  4. <!-- /-------------// HTML CODE STARTS HERE //-------------/ -->

  6.     <title>Random Task List</title> 
  7. <h1>todo list</h1>
  8.      <label><input type="text" id="enter_task" placeholder="Add items to list"></label>
  9.     <input type="submit" id="add" value="Add">
  10.     <p>
  11.         <ul id="todo_list">
  12.         </ul>
  13.     </p>
  14.     <p>There are &nbsp;<span id="counter"></span>&nbsp;items in list.</p>

  16. <!-- /------------// JAVASCRIPT - JQUERY //---------------/ --><script>

  18.   function enter_task () {
  19.         var text = $('#enter_task').val();
  20.         $('#todo_list').append('<li>'+ text + '<input type="submit" class="done delete" value="Delete">' +'</li>');
  21. };

  23. /*
  24. $('#todo_list').on('click', '.edit', function(){
  25.     $(this).parent().attr('contenteditable','true');
  26. });
  27. */

  29. $('#todo_list').on('click', '.delete',function(){
  30.     $(this).parent().remove();
  31. });

  33. $(function() {
  34.     $('#add').on('click', enter_task);
  35. });


  38. // This BELOW is what I wanted to do but it is not working at all.

  40. /*

  42. var todo_list = document
  43. .getElementsByIdName('todo_list');

  45. $('#add').click(function(){
  46.     //$('#todo_list').appendTo('counter');
  47.     $('#counter').text('There are now ' + todo_list.length + ' listed elements.');
  48. });
  49.     
  50. */