Question

I’m creating div elements (for entering notes) on the fly using jtemplates which looks something like this –

 <table>
  <tr>
   <td>
      <div id="divNotesMo{$T.index}" title="Notes">
         <textarea id="taNotesMo{$T.index}" rows="2" cols="20"></textarea>
      </div>
   </td>
   <td>
    <div id="divNotesTu{$T.index}" title="Notes">
         <textarea id="taNotesTu{$T.index}" rows="2" cols="20"></textarea>
    </div>
   </td>
  </table>

And I’m making dialog boxes out of them by using $('divNotesId').dialog and setting the buttons, etc. When the page loads, all the div elements which has dialogs attached to it are moved to the bottom of the page (removed from the table completely by jquery-ui). I have a requirement to delete the entire row and all of its contents. When I do it, the notes dialogs are not deleted as they are no longer in the table row (they’re moved to the bottom of the page). When I build the next new row, the old div id’s are conflicting with the new div id’s. I’m using jquery-ui-1.8.17.

The markup look something like this –

My question is, how do I delete the dialogs I created on the fly? There are other dialogs on the page that I don’t want to delete though. Thank you.

Answer 1

I think you should attach custom data- tag to the dialog matching the table row and then call the dialog destroy function when the row is removed.

$(<selector>).dialog('destroy');

Check my DEMO which gives you an idea of how to link the tr and the dialog div and can be later removed when the row is removed.