如何使用带有关闭事件的 jQuery 预先添加列表项？

简介：任务是使用 jQuery 预先添加列表项。可以使用 jQuery 从列表中动态添加和删除项目。这可以通过使用事件处理程序来监听按钮点击来完成。我们将通过一个例子来理解这一点。

例子：

  

    
        li {
            list-style: none;
            margin: 1%;
        }
    
  
    
    

  

  
    List
    
  
        
         
             X
        
    
  
    
    + Add item
  
    
  
        // When add button is clicked, 
        // list item is prepended
        $(".add").click(function () {
            $("#list").prepend(
'<li><input type = "text"><button class="close">X</button></li>');
        });
  
        // When close button is clicked, 
        // list item is removed
        $(document).on("click", 
            "button.close", function () {
                $(this).parent().remove();
            });
    

  

说明：这里有一个列表（id = “list”），带有一个文本框和一个关闭按钮（class = “close”）。该按钮用于从列表中删除项目。在列表的末尾，我们有一个添加按钮（class = “add”），用于在开头添加一个新的列表项。

$(".add").click(function () {
    $("#list").prepend('

     
     
        X
    
');
});

.click() 被添加到“添加”按钮以监听鼠标点击。单击按钮时，使用 prepend()函数添加一个带有文本框和关闭按钮（具有相同的“关闭”类）的列表项。我们使用 prepend函数是因为我们想在列表的开头添加一个项目。为了在最后添加一个项目，将使用 append()。

$(document).on("click", "button.close", function () {
    $(this).parent().remove();
});

这里我们使用 on()函数来监听鼠标点击，因为 click() 不适用于动态生成的元素。现在它也适用于新添加的“关闭”按钮。当具有后代类“close”的按钮被点击时，它的父类（

，列表项）被删除。

输出：
• 原单
  

• 点击添加按钮后

  

  单击添加项目后，新的列表项会被添加到列表的开头