title: Pseudo-selectors with siblings method
body: <p>Earlier, I answered <a href="https://stackoverflow.com/questions/7818024/getting-table-row-of-this-parent-siblings-table/">this question</a>, which was basically about removing a table row. This question came about as the result of the comments on that question. Given the following HTML:</p>
  
  <pre><code>&lt;div&gt;&lt;a href="#" class="removelink"&gt;remove&lt;/a&gt;&lt;/div&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 1&lt;/td&gt; 
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And the following jQuery:</p>
  
  <pre><code>$('.removelink').click(function(){
      $(this).parent().siblings('table tr:last').remove();
  });
  </code></pre>
  
  <p>I would expect nothing to happen, because the <a href="http://api.jquery.com/siblings/" rel="nofollow noreferrer"><code>siblings</code></a> method should select the siblings of the currently matched element, optionally filtered by a selector. From the jQuery docs:</p>
  
  <blockquote>
    <p>The method optionally accepts a selector expression of the same type
    that we can pass to the $() function. If the selector is supplied, the
    elements will be filtered by testing whether they match it.</p>
  </blockquote>
  
  <p>Based on that, I read the above code as "get the siblings of the current element (the <code>div</code>) which are the last <code>tr</code> within a <code>table</code>". Obviously there are no elements that match that description - there is a <code>tr</code> within a <code>table</code>, but it's not a sibling of the <code>div</code>. So, I wouldn't expect any elements to be returned. However, it actually returns the entire table, as if it ignores the <code>tr:last</code> part of the selector entirely. </p>
  
  <p>What confused me further was that if you remove the <code>:last</code> pseudo-selector, it works as expected (returning no elements).</p>
  
  <p>Why is the entire table removed by the above code? Am I just being stupid and missing something obvious? You can see the above code in action <a href="http://jsfiddle.net/Yd49H/4/" rel="nofollow noreferrer">here</a>.</p>
  
  <p><strong>Edit</strong> - Here's a simplified version. Given the following HTML:</p>
  
  <pre><code>&lt;div id="d1"&gt;&lt;/div&gt;
  &lt;div&gt;
      &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Why does the following jQuery return the second <code>div</code>:</p>
  
  <pre><code>$("#d1").siblings("div span:last");
  </code></pre>
  
  <p>I would expect it to return nothing, as there is not a <code>span</code> which is a sibling of <code>#d1</code>. <a href="http://jsfiddle.net/Yd49H/9/" rel="nofollow noreferrer">Here's a fiddle</a> for this simplified example.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Following the brilliant investigation from @muistooshort, I have created a <a href="http://bugs.jquery.com/ticket/10562" rel="nofollow noreferrer">jQuery bug ticket</a> to track this issue.</p>