Delete <li>'s that have the same value in another <li>
<p>If there were two <code>&lt;ul&gt;</code>'s, one called <code>list_a</code> and the other called <code>list_b</code>, using javascript and not using any libraries like jQuery, how would you delete the <code>&lt;li&gt;</code>'s in <code>list_a</code> that have the same value as those in <code>list_b</code>?</p>

<p>Heres the example HTML:</p>

<pre><code>  &lt;ul id="list_a"&gt;
    &lt;li value="1"&gt;list_a_0&lt;/li&gt;
    &lt;li value="8"&gt;list_a_8&lt;/li&gt;
    &lt;li value="9"&gt;list_a_9&lt;/li&gt;
  &lt;/ul&gt;

  &lt;ul id="list_b"&gt;
    &lt;li value="8"&gt;list_b_8&lt;/li&gt;
    &lt;li value="9"&gt;list_b_9&lt;/li&gt;
    &lt;li value="2"&gt;list_b_2&lt;/li&gt;
  &lt;/ul&gt;
</code></pre>

<p>The end result should be:</p>

<pre><code>  &lt;ul id="list_a"&gt;
    &lt;li value="1"&gt;list_a_0&lt;/li&gt;
    &lt;!-- DELETED TWO &lt;li&gt;'s --&gt;
  &lt;/ul&gt;

  &lt;ul id="list_b"&gt;
    &lt;li value="8"&gt;list_b_8&lt;/li&gt;
    &lt;li value="9"&gt;list_b_9&lt;/li&gt;
    &lt;li value="2"&gt;list_b_2&lt;/li&gt;
  &lt;/ul&gt;
</code></pre>

<p>The javascript so far that I can build (that doesn't work) is:</p>

<pre><code>window.onload=function()
{
  init();

  function init()
  {
    var listA = document.getElementById("list_a");

    for(var i in listA.childNodes)
    {
      var x = listA.childNodes[i];
      var listB = document.getElementById("list_b");

      for(var j in listB.childNodes)
      {
        var y = listB.childNodes[j];
        if(x.innerHTML == y.innerHTML)
          listA.removeChild(listA);
      }
    }          
  }  
}
</code></pre>

<p>Thanks!</p>
