Home/ Questions/Q 9309999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T01:00:37+00:00

I have been staring at the problem for hours. I am just starting to

  • 0

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.

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.

Can anyone help me spot the issue?

<!doctype html>
<head>
<title>Click away</title>
<link href="stylesheets/standard.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
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("<li>" + xPos + ", " + yPos + "</li>");
});
//This is the section I can't get to work
$("#clear").click(function () {
$("#list").remove();
}); 
</script> 
</head>
<body>
<h1> Click away</h1>
<h2>Start clicking...</h2>  
<h2 id="display"></h2>
<button id="clear">Clear the location list</button> 
<h2>Click locations:</h2>   
<ul id="list"></ul>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use $("#list").empty();

    Using $("#list").children().remove(); will also work but the first one is more efficient.

    I think you should also exclude the clear button from your list and put your code inside .ready() handler so that the code executes after DOM is ready and your elements are loaded:

    $(document).ready(function(e) {

    var count = 0;
    $("html").click(function () {
        count++;
        $("#display").html("The click count is: " + count);
    });
    $("html").click(function (e) {
        if (e.target !== document.getElementById('clear')) { //exclude the clear button 
            var xPos = e.pageX;
            var yPos = e.pageY;
            $("#list").append("<li>" + xPos + ", " + yPos + "</li>");
        }
    });

    $("#clear").click(function () {
        $("#list").empty(); //empty list
    });

});
    • 0