Question

If there were two <ul>‘s, one called list_a and the other called list_b, using javascript and not using any libraries like jQuery, how would you delete the <li>‘s in list_a that have the same value as those in list_b?

Heres the example HTML:

  <ul id="list_a">
    <li value="1">list_a_0</li>
    <li value="8">list_a_8</li>
    <li value="9">list_a_9</li>
  </ul>

  <ul id="list_b">
    <li value="8">list_b_8</li>
    <li value="9">list_b_9</li>
    <li value="2">list_b_2</li>
  </ul>

The end result should be:

  <ul id="list_a">
    <li value="1">list_a_0</li>
    <!-- DELETED TWO <li>'s -->
  </ul>

  <ul id="list_b">
    <li value="8">list_b_8</li>
    <li value="9">list_b_9</li>
    <li value="2">list_b_2</li>
  </ul>

The javascript so far that I can build (that doesn’t work) is:

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);
      }
    }          
  }  
}

Thanks!

Answer 1

DEMO: http://jsfiddle.net/rmXrZ/

window.onload = function() {

    var listA = document.getElementById("list_a");
    var listB = document.getElementById("list_b");

    for (var i = 0; i < listA.children.length; i++) {
        var x = listA.children[i];

        for (var j = 0; j < listB.children.length; j++) {
            var y = listB.children[j];
            if (x.value == y.value) {
                listA.removeChild(x);
                i--;
            }
        }
    }
}

• Don’t use for-in for iteration of numeric indices

• Cache the DOM selection instead of re-selecting in the loop

• Use .children instead of .childNodes to avoid text nodes between elements

• Compare .value instead of .innerHTML

• Remove x instead of listA

• When an element is removed from listA, decrement i, because removal from the DOM means removal from the .children collection.