title: Remove html elements added dynamically with JQuery
body: <p>In my html page, I have a select with some options.<br>
  When selecting an option, an ajax call is fired passing the option's value to a php script, which returns an html fragment (another select) with a certain id that is appended to the page.</p>
  
  <p>When the user selects another option from the first select, the event is fired again, the ajax call is executed and another html fragment (with the same id) gets appended to the page.</p>
  
  <p>I want that, if the event is fired a second time, the appended element is removed form the page before appending the new one.</p>
  
  <p>At the moment I'm using this code:</p>
  
  <pre><code>$(document).ready(function() {
      $("#id_serie").change(function() { //#id_serie is the if of the first select
          if ($("#id_subserie_label")) { //#id_subserie_label is the id of the html element returned by the ajax call
              console.log("Removing");
              $("#id_subserie_label").empty().remove();
          }
          var url = 'myscript.php';
          var id_s = $(this).val();
          $.post(url, {id_serie: id_s}, function(data) {
              $("#id_serie").parent().after(data);
          });
      });
  }); 
  </code></pre>
  
  <p>This is not working though, the html element returned by the second ajax call is appended after the element returned from the first call (because the element with id #id_subserie_label is not in the page when the script is loaded?).</p>
  
  <p>How can I achieve what I need? </p>