bootbox giving DOM selection trouble

I wanted to use better confirm dialog box, so I decided to use bootbox, however, it is giving me trouble selecting parents element which is very essential for me. Previously, my onclick function parameter was 'this', however, I have to remove it as after using bootbox as 'this' would return bootbox generated dynamic parents which I don't need. My onclick function is:

<tr class="live" closestmatch="" matcheswith="" pid="267915" xtid="">
<td tag="_ACTIONS">
<div class=""> 
<ul class="dropdown-menu" aria-labelledby="dLabel-267915">
    <li>
       <a class="deletebtn" onclick="bootbox.confirm('Delete the record?', function (result) { if (result) { xlist.Delete('a.deletebtn'); }});">
                <span class="glyphicon glyphicon-trash"></span> Delete row
            </a>
    </li>

Previously, before using bootbox, I used to have 'this' as parameter for my javascript function xlist.Delete(this), which would then return the corresponding 'a' tag and I could access the 'id' of the concerned row and would pass the id(here pid) to an ajax call for the delete operation.

However, now I cannot include 'this' keyword as it will return bootbox parents elements. But passing 'a.deleteBtn' will select all the rows and will delete the last record if I use 'parents' keyword and delete first record if I use 'closest' keyword when accessing the parents element. My delete method (Delete is a part of xlist):

    Delete: function(ele) {
    var row = $(ele).parents('tr'); 
    var pid = row.attr('pid');
    $.post('DeleteRow?pid=' + pid + '&datatype=' + $('#DataType').val(), function (data, text, xhr) {
            $('tr.live[pid=' + data + ']').remove();                

        });
    },

How do I select the row that I am doing to delete? I thought about adding a class f. ex., 'selected' whenever I choose 'delete' option from the dropdown but this would add 'selected' class to all rows. Any help in this regard will be appreciated, feel free to ask if I missed anything.

Solution

Try to bind click event on class .deletebtn like,

<tr class="live" closestmatch="" matcheswith="" pid="267915" xtid="">
<td tag="_ACTIONS">
<div class=""> 
<ul class="dropdown-menu" aria-labelledby="dLabel-267915">
    <li>
       <a class="deletebtn">
          <span class="glyphicon glyphicon-trash"></span> Delete row
       </a>
    </li>
....

Use .on() to bind click event on delete button and don't pass all a.deletebtn in Delete function, just you need to pass the current clicked anchor element like,

$('.deletebtn').on('click',function(e){
    e.preventDefault();
    vat that = this;
    bootbox.confirm('Delete the record?', function (result) { 
       if (result) {
           xlist.Delete(that); // pass 'that' instead of passing all 'a.deletebtn'
       }
    });
});

One more thing, use .closest() instead of using .parents() in Delete function. So that it is sure that it will give the closest tr not all the parents encountered in hierarchy.

Delete: function(ele) {
   var row = $(ele).closest('tr');  // use closest in place of parents here
   var pid = row.attr('pid');
   // bla bla bla
},