删除<李>'s中具有相同值的另一<李>

Delete <li>'s that have the same value in another <li>

本文关键字：gt lt 删除      更新时间：2023-09-26

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

以下是示例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>

最终结果应该是：

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

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

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

谢谢！

演示：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集合中移除。

  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，在这种情况下，儿童是更好的数据选择。

相关文章：