$（'p'）。remove（）;不起作用，为什么？

Question

我有这个jQuery代码，我正在试图做的是用.append()方法将值添加为“项目”，我从输入文本框中获取，然后将它们输入到“lista”作为类名的div中点击后用“boton”作为id。这一切工作正常，问题出现时，当我尝试删除我添加的项目，$('this').remove();没有做任何事情。

有什么理由说明为什么这种方式不起作用？我会很感激任何帮助。

$(document).ready(function(){ 
    var contador = 1; 
    $('#boton').click(function(){ 
    var item = $("input:text").val(); 
     if (item !== ""){ 
      $('.lista').append("<p style ='cursor:pointer;'>"+contador+"º) "+ 
      $("input:text").val()+"</p>") 
      contador++; 
     } 
    }); 

    $("p").click(function(){ 
     $(this).remove(); 
    });   
}); 

Answer 1

这里需要使用event delegation因为你的段落已被动态补充说：

$('.lista').on('click', 'p', function() { 
    $(this).remove(); 
}); 

这将帮助你click事件绑定到这些新创建的段落。

Answer 2

使用event delegation的元素是动态创建

$('.lista').on('click', 'p', function() { 
    $(this).remove(); 
}); 

Answer 3

由于要动态地创建新的“P”元素，你应该使用jQuery .on将事件处理程序附加到元素。

$(".lista").on("click", "p", function() 
     $(this).remove(); 
    });