javascript - 添加和删​​除 jquery li 元素

Question

我想添加 li 元素，它工作正常，但删除不适用于新元素。 我一开始有三个 li 元素，因此删除函数起作用。

通过我的“add”函数，我创建了具有相同类的 Li 元素，为什么它对新元素不起作用？

http://jsfiddle.net/3c96gduL

$(document).ready(function(){
    $("#add_li").click(function (){
        $("ol").append("<li>" + $("input").val() + "<a href=\"#\" class=\"remove\">X</a></li>");
    });
    $("#remove_li").click(function(){
        $("li:last").remove();
    });
    $(".remove").click(function(){
        $(this).parents('li').remove();
    });

    var log = $('.remove');
    console.log(log);
    console.log(jQuery);    

});

Answer 1

您需要使用event delegation用于将事件 append 到动态添加的 dom。

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$("ol").on('click','.remove',function(){
    $(this).parents('li').remove();
});

Working Demo