title: Select list - removing appended elements after using getJSON
body: <p>In my form I have two items selectors. Selecting the first one should always clear the second list (all elements) and populate it with appended options that I get using getJSON. I have tried at least dozen different ways to do it (e.g. .empty(), .find and .remove) but nothing really works. Thanks in advance!</p>
  
  <pre><code>&lt;form id="devuser" action="#" class="form-horizontal form-seperated" method="post"&gt;
      &lt;div class="form-body"&gt;
          &lt;div class="col-md-3"&gt;&lt;select id="select1" class="form-control select"&gt;
              &lt;option value="m"&gt;M&lt;/option&gt;
              &lt;option value="f"&gt;F&lt;/option&gt;
          &lt;/select&gt;&lt;/div&gt;
          &lt;div class="col-md-3"&gt;&lt;select id="select2" class="form-control select"&gt;
          &lt;/select&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And here goes js code with .empty() example but I also tried .find('option') and .remove(). </p>
  
  <pre><code>$("#select1").change(function() {
  var userurl = urldv + $(this).val();
    $.getJSON(userurl).done(function(data){
        for (var i=0, len=data.length; i &lt; len; i++) {
            $("#select2").append('&lt;option id="al'+i+'" value="'+data[i].im+'"&lt;/option&gt;');
            $("#device"+i).append(data[i].dn;
        }
    });
    $("#select1").change(function() {
      $("#select2").empty();
          });
      });
  </code></pre>