jquery remove not working on appended item -

i'm trying remove items i've added list i've added.

the script works on items in list not ones gets appended.

http://jsfiddle.net/9mkme/

<script> $(document).ready(function(){ $('.add').click(function() {     $(".list").append('<li>'                               + 'item '                               + '<a href="#" class="remove_project_file" border="2">x</a>'                               + '</li>');      return false; });  // using live() bind event future // elements existing ones $('.remove').on('click', function() {     $(this).parent().remove();     return false; }); }); </script>  <span class="inputname">     <a href="#" class="add">         add     </a> </span>  <ul class="list">     <li>item <a href="#" class="remove" border="2">x</a></li> </ul>  </div> 

you need use .on()'s event delegation syntax:

change:

$('.remove').on('click', function() {     $(this).parent().remove();     return false; }); 

to:

$('.list').on('click', '.remove', function() {     $(this).parent().remove();     return false; }); 

jsfiddle example

note need add remove class appended list items:

$(".list").append('<li>' + 'item ' + '<a href="#" class="remove remove_project_file" border="2">x</a>' + '</li>'); 

from docs on .on():

event handlers bound selected elements; must exist on page @ time code makes call .on(). ensure elements present , can selected, perform event binding inside document ready handler elements in html markup on page. if new html being injected page, select elements , attach event handlers after new html placed page.