Javascript “清除无序列表”按钮不工作_Javascript_Jquery

Javascript “清除无序列表”按钮不工作

javascript jquery

Javascript “清除无序列表”按钮不工作,javascript,jquery,Javascript,Jquery,我已经盯着这个问题好几个小时了。我刚刚开始学习Jquery，我有一个小项目，需要使用按钮清除无序列表中的元素首先，我跟踪用户的鼠标位置和鼠标点击。每次他们点击按钮，我都会建立一个无序列表，并记录x、y位置。然后，我应该使用一个按钮来清除列表。一切似乎都很好，但单击按钮时，会将其添加到列表中，而不是将其清除有人能帮我发现这个问题吗 <!doctype html> <head> <title>Click away</title> <link

我已经盯着这个问题好几个小时了。我刚刚开始学习Jquery，我有一个小项目，需要使用按钮清除无序列表中的元素

首先，我跟踪用户的鼠标位置和鼠标点击。每次他们点击按钮，我都会建立一个无序列表，并记录x、y位置。然后，我应该使用一个按钮来清除列表。一切似乎都很好，但单击按钮时，会将其添加到列表中，而不是将其清除

有人能帮我发现这个问题吗

<!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>


点击离开
var计数=0；
$（“html”）。单击（函数（）{
计数++；
$（“#显示”）.html（“单击计数为：”+count）；
});
$（“html”）。单击（函数（e）{
var xPos=e.pageX；
var yPos=e.pageY；
$（“#列表”）。追加（“”+xPos+”，“+yPos+””；
});
//这是我不能去工作的地方
$（“#清除”）。单击（函数（）{
$（“#列表”）.remove（）；
}); 
点击离开
开始单击。。。
清除位置列表
单击位置：

$（“#列表”）.empty（）
它将清除元素的所有子元素。
使用$（“#list”）.empty（）
使用$（“#列表”）.children（）.remove（）也可以，但第一个更有效
我认为您还应该从列表中排除清除按钮，并将代码放入.ready（）
处理程序中，以便在DOM就绪并加载元素后执行代码：
$(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
    });

});

$（文档）.ready（函数（e）{
var计数=0；
$（“html”）。单击（函数（）{
计数++；
$（“#显示”）.html（“单击计数为：”+count）；
});
$（“html”）。单击（函数（e）{
如果（e.target！==document.getElementById（'clear'）{//排除清除按钮
var xPos=e.pageX；
var yPos=e.pageY；
$（“#列表”）。追加（“”+xPos+”，“+yPos+””；
}
});
$（“#清除”）。单击（函数（）{
$（“#列表”）.empty（）；//空列表
});
});
我尝试实现了这一点。当我点击按钮时，列表停止增长，不再添加任何项目，但它没有清除它。