title: Ember.js - Remove Only One instance of Object with removeObject
body: <h2>Explanation</h2>
  <p>I have a very simple calorie tracking app that uses the Nutritionix API to search for food items based on the user's input. The results are added to a <code>results</code> array, which is then displayed to the user. When a user clicks the &quot;Add&quot; button next to one of these items, the calories are added to a counter, and the food itself is added to a <code>todaysFood</code> array (using Ember's <code>pushObject</code>). This is then used to display which food the user has consumed today in a separate table.</p>
  <p>When a user clicks the <code>remove</code> button next to one of the <code>todaysFood</code> items, it triggers an action, <code>removeItem</code>, and passes the index of the item clicked to <code>removeItem</code>. This index is used inside of Ember's <code>removeObject</code> to remove the item from the <code>todaysFood</code> array, and thus update the view (remove that item from the list and its calories from the counter).</p>
  <h2>Problem</h2>
  <p>When more than one of the same item are added to <code>todaysFood</code>, clicking <code>remove</code> on just one of those items removes ALL of the instances from <code>todaysFood</code>, and the view. This makes sense to me now, because of the docs' example:</p>
  <pre><code>var cities = ['Chicago', 'Berlin', 'Lima', 'Chicago'];
  cities.removeObject('Chicago');  // ['Berlin', 'Lima']
  cities.removeObject('Lima');     // ['Berlin']
  cities.removeObject('Tokyo')     // ['Berlin']
  </code></pre>
  <p>However, it also only removes the calories of ONE item, not all instances.</p>
  <p>So, the question is: How do I remove only ONE instance of that item when <code>remove</code> is clicked? I.e., if two tacos are added, and I click <code>remove</code> on one, I only want that ONE to be removed (from the list and the calories).</p>
  <p>Here is my <code>removeItem</code> action:</p>
  <pre><code>removeItem(index) {
          var self = this;
  
          // Store property paths for easy access
          let todaysPath = this.get('healthData').todaysFood;
          let caloriesPath = 'healthData.calories';
  
          this.set(caloriesPath, this.get(caloriesPath) - Math.round(todaysPath[index].fields.nf_calories));
  
          todaysPath.removeObject(todaysPath[index]);
  
      }
  </code></pre>
  <h3>Disclaimer</h3>
  <p>I'm aware that I may not be handling this correctly at all. I'm open to any suggestions to make this better. Thanks!</p>