“清除未排序列表”按钮不起作用

Clear Unordered list button not working

本文关键字：按钮 不起作用 列表 排序 清除      更新时间：2023-09-26

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

使用$("#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
    });
});

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

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

相关文章：