如何使用带有close event的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 =“列表”)。该按钮用于从列表中删除项目。在列表的末尾，我们有一个添加按钮(class =“ add”)，用于在开始处添加一个新的列表项。

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

     
     
        X
    
');
});

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

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

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

，列表项)将被删除。

输出：
• 原始清单
  

• 点击添加按钮后

  

  单击添加项后，新的列表项将位于列表的开头