$（'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(); 
    });