|
<!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> |