title: empty() doesn't remove html content when checking source
body: <p>I have an AJAX call which returns some data from a PHP file. I am trying to empty some HTML content and replace it with the data returned from the PHP file. I'm using this to empty the content:</p>
  
  <pre><code>$('#due-tasks-content').empty();
  </code></pre>
  
  <p>and this to add the new content:</p>
  
  <pre><code>$('#due-tasks-content').html(data.due_tasks);
  </code></pre>
  
  <p>This seems to work, visually, but if I check the source of the page using the View Source browser option, the content is not removed. If I refresh the source page, the content is erased. </p>
  
  <p>My question is, how do I erase the content without having to refresh? I've tried remove(), replaceWith() and empty() but they all seem to only erase the content visually, but not on the backend.</p>
  
  <p>Update:</p>
  
  <p>The problem is the following:</p>
  
  <p>I have two table, A and B let's say.</p>
  
  <p>Table A has a task, Table B is empty.</p>
  
  <p>When the task is complete, it goes into Table B. At the end of the update function within the PHP file, PHP echo new updated tables which I get back in the Ajax call. I then need to remove the old tables with the new ones.</p>
  
  <p>This works fine. With these table, I have some bootstrap modals which will appear when the user clicks the name column of the table, which will show the user some info. The modal is by ID. </p>
  
  <p>When the task goes from Table A to Table B, when I click the name column on Table B, the modal doesn't show up and I'm not sure why. I now realized that I made a mistake by looking at the source as I understand that, that only shows how the page was loaded initially.</p>