clone - Remove an added element with jquery -

two things i'm trying accomplish. 1) using clone method want user able add multiple text box items delete link adjacent text box, not below working now. 2). when clicking 'delete' link want remove parent list item , delete link. i've looked around answer not coming one. also, if method better clone work, i'm open suggestions , explanations.

my jsfiddle code:

$('#click').click(function(){ var clone = $('li:last').clone() if(!clone.find('.del')[0]) clone.append('<a href="#" class="del">delete</a>')  clone.appendto('ul');     });  $('ul').on('click', 'li .del', function(){      $(this).closest('li').remove();         }); 

see updated fiddle http://jsfiddle.net/juanpastas/56wuv/17/

basically need handle events in elements not yet created:

$('ul').on('click', 'li .del', function(){ 

and in order use selector

$(this).closest('li') 

you need put $(this), i.e. .del elements inside li element

var clone = $('li:last').clone().append('<a href="#" class="del">delete</a>') clone.appendto('ul'); 

update

if(!clone.find('.del')[0]) clone.append('<a href="#" class="del">delete</a>')  clone.find('.del') // returns elements del class inside cloned element [0]                // gets first element in these elements, undefined if no del elements found !                  // negates undefined, i.e. true,  // code enter if when there no del element  clone.append('<a...'  // append delete if there no delete link