Remove a programatically added <li> tag using jQuery -

good day,

i have been struggling particular piece of code while now. have read , have tried jquery stackoverflow. main problem answers (well find) address generated html or static pages.

my delete code (below), both commented , uncommented, works on page created static html list.

$(function () {     //$(".deletebutton").click(function () {     //    //$(this).closest("li").remove();     //    jquery(this).closest('li').fadeout(400, function () { $(this).remove(); });     //});     $('.deletebutton').on({         click: function () {             jquery(this).closest('li').fadeout(400, function () { $(this).remove(); });         }     }); }); 

however use jquery add "li" tag, delete button deletes text within delete button leaving "li" on page.

here code use add "li"

function updatepage() {     $.ajax({         type: 'get', url: "newadditions", contenttype: "application/json", processdata: false,         success: function (data) {             data = json.parse(data);             (var key in data) {                 $('.dllist').append(data[key]);             }             settimeout(updatepage, 5000);         }, datatype: "text"     }); } 

data[key] this

'<li class="ui-state-default dlitem" id={0}><table><tr><td style="width:50%"><input type="submit" value="{1}" id={2} onclick="resume(this.id); return false"/> \                                         <input type="submit" class="deletebutton" value="delete" id=del-{2} onclick="delete(this.id); return false" /> \                                         <label>{3}</label></td> \                                     <td style="width:10%; text-align:center" id=per-{2}>{4}</td> \                                     <td style="width:5%; text-align:center" id=tfs-{2}>{5}</td> \                                     <td style="width:6%; text-align:center" id=est-{2}>{6}</td> \                                     <td style="width:5%; text-align:center">{7}</td> \                                     <td style="width:10%; text-align:center">{8}</td></tr></table></li>' 

i stuck this. have gone through multiple links on side, read jquery texts , tried many different permutations of code.

hopefully can me here or point me in right direction.

background: using python , cherrypy back-end , mako templating. mention completeness sake doubt creating issue having page loaded.

thanx

for dynamically added html.. have handle event delegation little differently

$(document).on('click','.deletebutton', function(){ }); 

the document can replaced outer container selector (div or something) more advisable.

you live deprecated in newer versions

$('.deletebutton').live( 'click', function(){} );