Question

如果有两个<ul>，一个名为list_a，另一个名为list_b，使用javascript而不使用任何库如jQuery，你会如何删除{{1} <li>中{}}与list_a中的值相同？

以下是HTML示例：

list_b

最终结果应为：

  <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>

到目前为止我可以构建的javascript（不起作用）是：

  <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>

谢谢！

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

请勿使用for-in进行数字索引的迭代
缓存DOM选择而不是在循环中重新选择
使用.children代替.childNodes来避免元素之间的文本节点
比较.value代替.innerHTML
删除x而不是listA
从listA删除元素后，会减少i，因为从DOM中删除意味着从.children集合中删除。

Answer 2

  function init() {
    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 in listB.children) {      
        var y = listB.children[j];
        if(x.value == y.value)
           x.parentNode.removeChild(x);
      }
    }          
  }

避免多次攻击DOM，同样在这种情况下，孩子是更好的数据选择。

删除<li>在另一个<li> <li> </li>中具有相同值的<li>

2 个答案: