shopping_list.js

$(function(){

$('#js-shopping-list-form)').submit(function(event){
  event.preventDefault();
  
  const newItem = $('js-shopping-list-entry').val();
  
  $('.js-shopping-list-entry').val(''); //what is the empty ('')
  
  $('.shopping-list').append(
    `<li>
        <span class="shopping-item">${newItem}</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>`);
  
});
//why don't these work?

$('.shopping-item-toggle').click(function() {
  $(this).toggleClass("check");
});

$('.shopping-item-delete').click (function() {
  $(this).remove();
  
  });
});