<!DOCTYPE html>
<head>
  <title>JS Grocery List</title>
  <meta charset="utf-8">
</head>
<body>
  <article id="page"></article>

  Add item: <input type="text" name="add" id="add"><br>
  Remove item: <input type="text" name="rem" id="rem"><br>
  <input type="submit" value="Submit" onClick="update()">


  <script>

    var groceries = {};

    var list = document.createElement("ul");
    document.getElementById("page").appendChild(list);

    function update() {

      var addItem = document.getElementById("add").value;
      var remItem = document.getElementById("rem").value;

      if (addItem != "") {
        if (groceries.hasOwnProperty(addItem)) {
          // alert(addItem + ": " + groceries[addItem]);
          groceries[addItem] ++;
          item.nodeValue = (addItem + ": " + groceries[addItem]);
          alert(item.nodeValue);
        } else {
          groceries[addItem] = 1;
          var element = document.createElement("li");
          element.className = addItem;
          var item = document.createTextNode(addItem + ": " + groceries[addItem]);
        }
        element.appendChild(item);
        list.appendChild(element);
        // alert(item.nodeValue);
      }

      if (remItem != "") {
        var remSelect = document.getElementsByClassName(remItem);
        // list.removeChild(remSelect);
        var arrFromList = Array.prototype.slice.call(remSelect);
        arrFromList[0].remove();
      }
    }
  </script>
</body>
</html>
Add unfinished JS Grocery List
Add unfinished JS Grocery List
