Implementing jquery on instead of live

Question

I am currently working on jquery .clone(). User of my application can clone and delete as many container as they wish. I was using jquery .live() method to delete a container but my code is not working anymore. After doing some Stackoverflow search, I found that .live() has been deprecated. Following is excerpt of my code.

HTML

<div id="wrapper">
    <div id="container1">
       Title:<input type="text" name="person.title" id="title">
       <input type="hidden" name="person.title" value="title"> 
       <div id="delete_title"></div>        
    </div>
    <div id="container2">
       Title:<input type="text" name="person2.title" id="title2">
       <input type="hidden" name="person2.title" value="title" id="title2"> 
       <div id="delete_title2"><p id="del_field"><a href="#"><span>Delete Title</span></a></p>             </div>        
   </div>
   <div id="container3">
       Title:<input type="text" name="person3.title" id="title3">
       <input type="hidden" name="person3.title" value="title" id="title3"> 
       <div id="delete_title3"><p id="del_field"><a href="#"><span>Delete Title</span></a></p></div>        
   </div>
</div>

JQUERY

$('p#del_field').live('click', function() {
   $(this).parents('div').remove();
   return false;
});    

The above code works fine with JQUERY 1.7. I have been trying to implement .on() but I end up deleting all the contained instead of the selected on. Here is my jquery with .on()

$('#wrapper').on('click','p#rdel_field', function () {
   $(this).parents('div').remove();
  return false;
 });

How do implement .on() to delete only the selected container? Thank you in advance. Any suggestion will help.

Answer 1

I would switch your P tags to use classes, the selector you have in on attachment is incorrect because you cannot share IDs across elements.

http://jsfiddle.net/adamfullen/f8nhE/

HTML

<div id="wrapper">
    <div id="container1">
       Title:<input type="text" name="person.title" id="title">
       <input type="hidden" name="person.title" value="title"> 
       <div id="delete_title"></div>        
    </div>
    <div id="container2">
       Title:<input type="text" name="person2.title" id="title2">
       <input type="hidden" name="person2.title" value="title" id="title2"> 
       <div id="delete_title2"><p class="del_field"><a href="#"><span>Delete Title</span></a></p>             </div>        
   </div>
   <div id="container3">
       Title:<input type="text" name="person3.title" id="title3">
       <input type="hidden" name="person3.title" value="title" id="title3"> 
       <div id="delete_title3"><p class="del_field"><a href="#"><span>Delete Title</span></a></p></div>        
   </div>
</div>

JS

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