title: Removing dynamic dropdown options after JQuery AJAX request
body: <p>I have a form that includes a dropdown box.  This dropdown's options are filled dynamically, using PHP, from my database.  When my form is submitted, the row containing the ticketId selected in the dropdown is removed from the database.  What I would like is for, after the AJAX call is successful, have this list repopulate without the row that was just removed.</p>
  
  <p>my form:</p>
  
  <pre><code>&lt;form name="transferTicketForm" id="transferTicketForm"&gt;
      &lt;div class='form-group'&gt;
          &lt;label for="ticket_number"&gt;Choose ticket:&lt;/label&gt;
          &lt;select name="ticket_number" id="ticket_number" class="form-control"&gt;
              &lt;?php foreach ($assigned_tickets as $ticket): ?&gt;
                  &lt;option value="&lt;?php echo($ticket-&gt;ticketId); ?&gt;"&gt;&lt;?php echo ($ticket-&gt;ticketId . " - " . $ticket-&gt;headline); ?&gt;&lt;/option&gt;
              &lt;?php endforeach; ?&gt;
           &lt;/select&gt;
       &lt;/div&gt;
       &lt;div class="form-group"&gt;
           &lt;label for="assignTo"&gt;Transfer to:&lt;/label&gt;
           &lt;select name="assignTo" id="assignedTo" class="form-control"&gt;
               &lt;?php foreach($employees as $employee): ?&gt;
                   &lt;option value='&lt;?php echo($employee-&gt;userId); ?&gt;'&gt;&lt;?php echo ($employee-&gt;firstName . " " . $employee-&gt;lastName);?&gt;&lt;/option&gt;
                &lt;?php endforeach; ?&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="transferComment"&gt;Comment:&lt;/label&gt;
            &lt;textarea name="transferComment" id="transferComment" class="form-control"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="text-center"&gt;
            &lt;input class="btn btn-primary" type="button" id="doTransferTicketButton" value="Transfer Ticket"&gt;
        &lt;/div&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>my Ajax call:</p>
  
  <pre><code>$('#doTransferTicketButton').click(function(){
        $.ajax({
            type:'POST',
            url:'&lt;?php echo site_url();?&gt;ticket_system/transfer_and_comment_ticket',
            data:{
                'assigned': $('#assignedTo').val(),
                'comment': $('#transferComment').val(),
                'ticketId': $('#ticket_number').val()
            },
            success: function(data){
                $target_ticket = $('#ticket_number').val();
                $('#ticket_' + $target_ticket).remove();
                $('#assigned').empty();
                $('#transferTicketOptions').slideToggle();
            }
        });
  });
  </code></pre>
  
  <p>Things I have tried:</p>
  
  <pre><code>success: function(data){
                $target_ticket = $('#ticket_number').val();
                $('#ticket_' + $target_ticket).remove();
                $('#ticket_number').empty();
                $('#transferTicketOptions').slideToggle();
            }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>success: function(data){
                $target_ticket = $('#ticket_number').val();
                $('#ticket_' + $target_ticket).remove();
                $('#ticket_number')[0].reset();
                $('#transferTicketOptions').slideToggle();
            }
  </code></pre>
  
  <p>Neither of which work for what I'm trying to do.</p>
  
  <p>Any help would be greatly appreciated.  Thank you!</p>