创建待办事件列表

让我们用我们所学的概念来创建一个To-Do列表项目。

“待办事项”列表可以将新项目添加到列表中，也可以删除现有项目。

首先，我们创建HTML：

<h1>My To-Do List</h1>
 <input type="text" placeholder="New item" /> 
 <button id="add">Add
 </button>
 <ol id="mylist"></ol>

点击按钮应该将输入字段的值添加到我们的<ol>列表中

现在，准备HTML，我们可以开始编写我们的jQuery代码。

首先，我们处理按钮的点击事件：

$(function() {   $("#add").on("click", function() {     //event handler   }); });

在事件处理程序中，我们选择输入字段的值并创建一个新的<li>元素，并将其添加到列表中：

var val = $("input").val(); 
if(val !== '') 
{   var elem = $("<li></li>").text(val);   
$(elem).append("<button>X</button>");   
$("#mylist").append(elem);   
$("input").val(""); 
//clear the input }

上面的代码将输入字段的值分配给val变量。 if语句检查该值是否为空，然后创建一个新的<li>元素。 添加一个删除它的按钮，之后将新创建的元素添加到<ol id =“mylist”>列表中。

以下是完整的代码：

$(function() 
{   $("#add").on("click", function() 
{     var val = $("input").val();     
if(val !== '') 
{       var elem = $("<li></li>").text(val);       
\$(elem).append("<button>X</button>");       
$("#mylist").append(elem);       
$("input").val("");     }   }); });

删除功能还没有实现。 我们将在下一节中处理它！

剩下要做的就是处理class =“rem”按钮上的click事件，并从列表中删除相应的<li>元素。

$(".rem").on("click", function() {   $(this).parent().remove(); });

请记住，这是当前的对象。 上面的代码移除了当前对象的父对象，在我们的例子中，它是remove按钮的父对象，<li>元素。

完整的代码：

$(function() {
  $("#add").on("click", function() {
    var val = $("input").val();
    if(val !== '') {
     var elem = $("<li></li>").text(val);
     $(elem).append("<button class='rem'>X</button>");
     $("#mylist").append(elem);
     $("input").val("");
     $(".rem").on("click", function() {
      $(this).parent().remove();
     });
    }
  });
});

“待办事项清单列表”仅仅是一个简短的演示，建立一个简单的项目说明如何处理事件。