Question

我一直盯着这个问题好几个小时。我刚刚开始学习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>

Answer 1

使用$("#list").empty();

使用$("#list").children().remove();也可以，但第一个更有效。

我认为您还应该从列表中排除clear按钮并将代码放在.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
    });

});

Answer 2

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

它将清除该元素的所有子项。

清除无序列表按钮不起作用

2 个答案: