The dreaded "undefined"

The dreaded "undefined"

Hello,
I have built another to-do list using jQuery.  It works exactly the way I want it to.  However, there is a pesky little "undefined" word showing up in my output that is wrecking the app just by it's mere appearance.  I have tried everything I know but can't seem to remove it.  Will someone out there take a look and tell me what they think the culprit is and how to fix it?  This didn't start happening until I added the remove code and fadeOut feature near the end of the JS and jQuery code.

Here is the html:

<main class="container">
<h1 class="appname1">To-Do List</h1>
<h5 class="taskinstruct1">Click the  Check Box to the left below if the task has been completed. Click the "X" on the far right of the screen to permanently delete the entry.</h5>
<ul id="list-items"></ul>
<form class="add-items">
  <input type="text" class="form-control" id="todo-list-item" placeholder="Type in the task that you need to complete">
  <button class="add" type="submit">Click here to add your entry</button>
</form>
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
</main>

And here is the JS and jQuery code:

$(document).ready(function () {

  $('#list-items').html(localStorage.getItem('listItems'));
    
  $('.add-items').submit(function(event) 
  {
    event.preventDefault();

    let item = $('#todo-list-item').val();

    if(item) 
    {
      $('#list-items').append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>X</a><hr></li>");
      
      localStorage.setItem('listItems', $('#list-items').html());
      
      $('#todo-list-item').val("");
    }
    
  });

  $(document).on('change', '.checkbox', function() 
  {
    if($(this).attr('checked')) 
    {
      $(this).removeAttr('checked');
    } 
    else 
    {
      $(this).attr('checked', 'checked');
    }

    $(this).parent().toggleClass('completed');
    
    localStorage.setItem('listItems', $('#list-items').html());
  });

  $(document).on('click', '.remove', function(){
  $(this).parent().fadeOut('slow',function(){
  $(this).remove();
    });
  
  localStorage.setItem('listItems', $('#list-items').html());
  });
});