title: Remove/delete jquery-ui dialog box from page
body: <p>I'm creating div elements (for entering notes) on the fly using jtemplates which looks something like this - </p>
  
  <pre><code> &lt;table&gt;
    &lt;tr&gt;
     &lt;td&gt;
        &lt;div id="divNotesMo{$T.index}" title="Notes"&gt;
           &lt;textarea id="taNotesMo{$T.index}" rows="2" cols="20"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
     &lt;/td&gt;
     &lt;td&gt;
      &lt;div id="divNotesTu{$T.index}" title="Notes"&gt;
           &lt;textarea id="taNotesTu{$T.index}" rows="2" cols="20"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
     &lt;/td&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>And I'm making dialog boxes out of them by using <code>$('divNotesId').dialog</code> 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. </p>
  
  <p>The markup look something like <a href="https://i.stack.imgur.com/WR1pL.png" rel="nofollow noreferrer">this</a> -</p>
  
  <p><img src="https://i.stack.imgur.com/WR1pL.png" alt="enter image description here"></p>
  
  <p>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.</p>