title: Clear text if button is clicked
body: <p>I need to create a page that displays the number of times a click occurs anywhere on the page along with a list of where the click happened. Also I have a button that clears the list. The button does not clear. The button click is counted as a click on the page body and that is increasing the count and never clearing it.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;p&gt;&lt;h3&gt;Click count:&lt;span id="output"&gt;
                  &lt;/span&gt;&lt;/h3&gt;&lt;/p&gt;
  
  
                  &lt;h3&gt;Click locations:&lt;/h3&gt;
                  &lt;div id="clickLocations"&gt;&lt;/div&gt; 
          &lt;input id="btn" type="button" value="Validate"&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
      var count = 0;
      $("body").click(function (event) {
  
          count += 1; //Count clicks when the body is clicked
          if (count &gt; 0) {
              $("span#output").html(" " + count);
              $("div#clickLocations").append("&lt;ul&gt;&lt;li&gt;" + event.pageX + ", " + event.pageY + "&lt;/li&gt;&lt;/ul&gt;"); //Display the x,y location of the click
  
          }
          $('#btn').click(function () { //Clear text when the button is clicked
              $("div#clickLocations").html('');
              $("span#output").empty();
  
              event.stopPropagation();
          }); //End button.click 
      }); //End body.click
  }); //End document.ready
  
  &lt;/script&gt;
  </code></pre>