Question

I have a seemingly very simple problem, but my bandwidth is so limited by now, and have searched SO but found a relevant question only applied to C#, I meant no luck yet.

HTML:

<ul class="first">
  <li data-id="1">One</li>
  <li data-id="2">Two</li>
  <li data-id="3">Thre</li>
  <li data-id="4">Four</li>
  <li data-id="5">Five</li>
  <li data-id="6">Six</li>
</ul>
<ul class="second">
  <li data-id="1">One</li>
  <li data-id="2">Two</li>
  <li data-id="3">Thre</li>
  <li data-id="4">Four</li>
</ul>

I want to remove the last 2 items from the first (hence Five and Six), because they do not exist in the second. Order is not important actually. The sample to simplify my problem.
Basically no clear idea to achieve this, sorry, so whenever I tried with .length check, I remove all the first items.

Any hint is very much appreciated. Thanks

UPDATED:
Sorry my bad.
“Order is not important actually”: I meant the lists may be unordered like:

<ul class="second">
  <li data-id="3">Thre</li>
  <li data-id="1">One</li>      
  <li data-id="4">Four</li>
  <li data-id="2">Two</li>
</ul>

Also applies to the first.

Answer 1

If you’re assessing equivalence by the data-id attribute:

$('.first li').filter(
    function(){
        return !$('.second li[data-id="' + $(this).data('id') + '"]').length;
    }).remove();​

JS Fiddle demo.

References:

• data().
• filter().