jQuery - event handling variations

Dead Simple Fiddle - with jquery events and bootstrap

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<ul id="todo">
  <li>buy milk</li>
  <li>arrange haircut</li>
  <li>pay credit card bill</li>
</ul>

<p>

</p>

CSS

.clickable{
    background: lightgray;
    width: 300px;
    cursor: pointer;
}
.output{
    height: 30px;
    width:300px;
    border: 1px solid red;
}

JavaScript

$('#todo').on('click', li, function (event) {
  $(this).remove()
})



$('#todo').append('<li>answer all the questions on SO</li>')