<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>待办事项</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" placeholder="New item" />
<button id="add">Add</button>
<button id="sum">count</button>
<ol id="my_list"></ol>
<script type="text/javascript" src="jquery-3.4.1min.js"></script>
<script type="text/javascript">
$(function() {
$("#add").on("click", function() {
var val = $("input").val();
if(val !== '') {
var elem = $("<li></li>").text(val);
$(elem).append("<button class='rem'>X</button>");
$("#my_list").append(elem);
$("input").val("");
$(".rem").on("click", function() {
$(this).parent().remove();
});
};
});
$("#sum").on("click", function() {
alert($("#my_list li").length);});
});
</script>
</body>
</html>
来源：https://www.cnblogs.com/hamao/p/11239191.html