How to click on a button, and have the item in question go to the next list using javascript?

I have this problem. I have two lists. One with the items of my fridge (that's the assignment :) ) and other with the items of t开发者_运维知识库he shop. I want to be able to click on an item of the fridge, and have it show up on the list of the left. In javascript, that is.

If anyone knows how to do it, I'd be very glad to hear from you.

Daniel

Using JavaScript:

function get(id) {
    return document.getElementById(id);
}

document.addEventListener('click', function(event) {
    event = event || window.event;

    if (event) {
        var el = event.target,
            ePa = el.parentNode,
            htm = "";

        if (String(ePa.id) === "list1") {
            htm = el.parentNode.removeChild(el);
            get("list2").appendChild(htm);
        } else if (String(ePa.id) === "list2") {
            htm = el.parentNode.removeChild(el);
            get("list1").appendChild(htm);
        }
    }
}, false);

Example here: http://fiddle.jshell.net/Shaz/EEfhh/

I wrote this - before I saw the Homework tag.

Would have been nice to see what you had already done before I did your assignment for you

<script>
var shopItems = [];
function addShop(theForm) {
  var sel = theForm.fridge;
  if (sel.selectedIndex < 1) return;
  var opt = sel.options[sel.selectedIndex]
  if (shopItems[opt.text]) return 
  shopItems[opt.text]=opt.value;
  theForm.shop.options[theForm.shop.options.length]=new Option(opt.text,opt.value);
  theForm.shop.options[theForm.shop.options.length-1].selected=true;
}
</script>

<form>
<select name="fridge" >
<option value="">Please select</option>
<option value="cheese">Cheese</option>
<option value="butter">Butter</option>
</select>
<input type="button" onclick="addShop(this.form)" value=" >>> ">

<select name="shop" >
<option value="">Please select</option>
</select>
</form>