title: Why do I get back 2 responses of 200 and 204 when using an AJAX call to delete objects?
body: <p>I've created some sample code below.  You can delete items simply by clicking the text you want to delete (or the li element).</p>
  
  <p>When you look at the network tab when you delete, you get back both a 204 and 200 response.  Why are there two? I'm only making 1 call.</p>
  
  <p>Where the heck is the request method "OPTIONS" coming from?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Cache DOM
  var $content  = $( 'ul' );
  var $name  = $( '#name' );
  var $bike  = $( '#bike' );
  var $addButton = $( '#add-item' );
  var $liElems  = $( 'li' );
  
  //Functions
  
  
  $( function () {
  
   function addItem( data ) {
    $content.append( '&lt;li id="' + data.id + '"&gt;' + data.name + ' likes ' + data.bike + '&lt;/li&gt;' );
   }
  
   $.ajax( {
    type: 'GET',
    url: 'http://rest.learncode.academy/api/sjm/bikes',
    success: function( response ) {
     $.each( response, function( index, bikes ) {
      addItem( bikes );
     });
    },
    error: function( ) {
     console.log ( 'error loading orders' );
    }
   });
  
   $addButton.on( 'click', function(){
    var data = {
     name: $name.val(),
     bike: $bike.val()
    };
  
    $.ajax( {
     type: 'POST',
     url: 'http://rest.learncode.academy/api/sjm/bikes',
     data: data,
     success: function( response ) {
      addItem( response );
     },
     error: function( ) {
      console.log( 'error while saving' );
     }
    });
   });
  
   $content.delegate( 'li', 'click', function ( ) {
    var id = $( this ).attr( 'id' );
    var $this = $( this );
  
    console.log ( 'delete ' + id);
    $.ajax({
     type: 'DELETE',
     url: 'http://rest.learncode.academy/api/sjm/bikes/' + id,
     success: function( response ){
      $this.fadeOut( 300, function ( ) {
       remove( );
      });
     },
     error: function( ){
      console.log( 'error deleting data' );
     }
    });
   });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="content"&gt;
   &lt;section&gt;
    name &lt;input type="text" id="name"&gt;
    bike &lt;input type="text" id="bike"&gt;
    &lt;button id="add-item"&gt;add data&lt;/button&gt;
   &lt;/section&gt;
   &lt;ul&gt;&lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>