Clear Unordered list button not working
<p>I have been staring at the problem for hours.   I am just starting to learn Jquery and I have a small project that requires me to use a button to clear the elements of an unordered list.</p>

<p>First, I most track the mouse posistion and mouse-click of the user.   Each time they click the button, I build an unordered list and record the x,y posistions.  Then, I am supposed to use a button to clear the list.    Everything seems to work fine, but the button when clicked, adds to the list instead of clearing it.  </p>

<p>Can anyone help me spot the issue?</p>

<pre><code>&lt;!doctype html&gt;
&lt;head&gt;
&lt;title&gt;Click away&lt;/title&gt;
&lt;link href="stylesheets/standard.css" rel="stylesheet"&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
var count = 0;
$("html").click(function(){
count++; 
$("#display").html("The click count is: " + count);
});
$("html").click(function(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#list").append("&lt;li&gt;" + xPos + ", " + yPos + "&lt;/li&gt;");
});
//This is the section I can't get to work
$("#clear").click(function () {
$("#list").remove();
}); 
&lt;/script&gt; 
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt; Click away&lt;/h1&gt;
&lt;h2&gt;Start clicking...&lt;/h2&gt;  
&lt;h2 id="display"&gt;&lt;/h2&gt;
&lt;button id="clear"&gt;Clear the location list&lt;/button&gt; 
&lt;h2&gt;Click locations:&lt;/h2&gt;   
&lt;ul id="list"&gt;&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
