title: Trying to remove items from an array in javascript/JQuery
body: <p>I've read several questions about this on StackOverflow, and found some solutions even, but they all seem to do the same weird thing:</p>
  
  <p>I have an array (array A) of 8 names:</p>
  
  <pre><code>arrayA= ["person1", "person2", "person3", "person4", "person5", "person6", "person7", "person8"];
  </code></pre>
  
  <p>And I have an array (array B) of 1 name:</p>
  
  <pre><code>arrayB= ["person1"];
  </code></pre>
  
  <p>Now, I want to remove all names that <em>do not</em> occur in Array B, from Array A.</p>
  
  <p>So I wrote a little function which loops through all items in Array A, and checks if they occur in Array B. If they do not, I remove them from Array A. </p>
  
  <p>So I looked for a function to remove strings from an array (in PHP, this is all so much easier...), and I found several methods, which all give me exactly the same problem. In the example below, I chose the cleanest method, using jquery's $.grep: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>arrayA= ["person1", "person2", "person3", "person4", "person5", "person6", "person7", "person8"];
  arrayB= ["person1"];
  
  for (var i = 0, len = arrayA.length; i &lt; len; i++) {
     
    if($.inArray(arrayA[i], arrayB) == -1){
  
      var removeName= arrayA[i];
  
      console.log('Removing row of: ' + removeName);
  
      /*
      $('tr[player=\'' + removeName + '\']').find('td')
      .wrapInner('&lt;div style="display: block;" /&gt;')
      .parent()
      .find('td &gt; div')
      .slideUp(700, function(){
        $(this).parent().parent().remove();
      });
      */
  
      arrayA= $.grep(arrayA, function(value) {
        return value != removeName;
      });
      
      console.log('arrayA now consists of: ' + arrayA);
  
    }
  
  }</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;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, it only removes the "even" items from arrayA, i.e. "person2", "person4", "person6" and "person8".</p>
  
  <p>If I execute this function multiple times, the 2nd time it removes again only the "even" items (which is now "person3" and "person7"), and the third time, it removes "person5" (finally)...</p>
  
  <p>Can someone please tell me what I'm not seeing?
  You can see from the console log that, the first time you run it, all the "odd" items in the array, (i.e. person3, person5 and person7) are "undefined"... </p>