topherPedersen/vanilla-todo.html

## vanilla-todo.html
<!DOCTYPE html>
<html>
<head>
  <!-- Mobile Friendly Meta Tag -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <h1>Vanilla TODO</h1>

  <input type="text" id="newItem">
  <button onclick="addToList();">+</button>

  <ul id="todoList"></ul>

<script>

  function addToList() {
    var task = document.getElementById("newItem").value;
    var thingtoadd = document.createElement("LI");
    thingtoadd.innerHTML = task;
    thingtoadd.id = Math.random().toString();


    var removebutton = document.createElement("BUTTON");
    removebutton.innerHTML = "X";
    removebutton.onclick = function() {
      removeFromList(thingtoadd.id);
    };

    thingtoadd.appendChild(removebutton);
    // thingtoadd.innerHTML += removebutton;

    var todoList = document.getElementById("todoList");
    todoList.appendChild(thingtoadd);
    /*
    thingtoadd.onclick = function() {
      removeFromList(thingtoadd.id);
    };
    */
    console.log(task);
  }
  function removeFromList(id) {
    var todoList = document.getElementById("todoList"); // parent
    var itemToBeRemoved = document.getElementById(id); // child
    todoList.removeChild(itemToBeRemoved);
  }
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- Mobile Friendly Meta Tag -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<h1>Vanilla TODO</h1>

	<input type="text" id="newItem">
	<button onclick="addToList();">+</button>

	<ul id="todoList"></ul>

	<script>

	function addToList() {
	var task = document.getElementById("newItem").value;
	var thingtoadd = document.createElement("LI");
	thingtoadd.innerHTML = task;
	thingtoadd.id = Math.random().toString();



	var removebutton = document.createElement("BUTTON");
	removebutton.innerHTML = "X";
	removebutton.onclick = function() {
	removeFromList(thingtoadd.id);
	};

	thingtoadd.appendChild(removebutton);
	// thingtoadd.innerHTML += removebutton;

	var todoList = document.getElementById("todoList");
	todoList.appendChild(thingtoadd);
	/*
	thingtoadd.onclick = function() {
	removeFromList(thingtoadd.id);
	};
	*/
	console.log(task);
	}
	function removeFromList(id) {
	var todoList = document.getElementById("todoList"); // parent
	var itemToBeRemoved = document.getElementById(id); // child
	todoList.removeChild(itemToBeRemoved);
	}
	</script>

	</body>
	</html>