Code

html

index.html (or just use jsbin.com)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button onclick="buildList()" id="specialButton">Try Me!</button>
  <ul id="list">A List:</ul>
</body>
</html>

something.js

// build a list (this one has 3 items, which means its length is 3)
var my_items = ["banana", "chocolate", "ice cream"];
 
function buildList() {
  // loop through the items
  //   var i = 0              means: set the variable i to 0, which is the first index
  //   i < my_items.length    means: while i (the index) is smaller than the length of the list
  //   i++                    means: add 1 to i.  another way you could write this is: i = i + 1
  for (var i = 0; i < my_items.length; i++) {
    // create an "li" element and put it in the variable "item"
    var item = document.createElement("li");
    // set every item to have the i-th text
    //   in other words, if i is 0, then the text is "banana"
    //                   if i is 1, then the text is "chocolate"
    //                   if i is 2, then the text is "ice cream"
    item.textContent = my_items[i];
    item.id = itemId(i);
    // find the list ("ul") on the page, and add this item to it
    document.getElementById("list")
      .appendChild(item);
  }
 
  // turn the button "off" by making it "do nothing" (null)
  document.getElementById("specialButton")
    .onclick = null;
}
 
function itemId(index) {
  return "li_item_" + index;
}
 
function itemIndex(id) {
  var pattern = /\d+/;
  return parseInt(pattern.exec(id), 10);
}
 
// special language which makes it so that every time a "click" happens on the page,
// the function is executed
document.addEventListener('click', function(e) {
  var target = e.target;
  var l = document.getElementById("list");
 
  if (target.parentNode == l) {
    var index = itemIndex(target.id);
    var other = document.getElementById(itemId(index + 1));
 
    if (other !== null) {
      l.removeChild(other);
    }
    else {
      l.removeChild(target);
    }
  }
 
  if (l.children.length === 0) {
    document.getElementById("specialButton")
      .onclick = buildList;
  }
});

Javascript Emptying list

Code

html