javascript - 使用 queryselectorall、jquery、getelementsbyid、getelementsbyclassname 从 dom 中删除元素

Question

我正在为一个库编写一个函数，该函数接受一个元素对象并将其从 DOM 中删除。我有这个工作正常，但想知道是否有办法做一个单一的 for 循环？我发现 NodeLists 和 HTMLCollections 不能使用相同的 for 循环，所以我构建了一个数组，然后删除了具有相同循环的元素。

   _remove = function(elem) {
      if(!elem) { return false; }
      // getElementById
      if(!elem.length) {
        if(elem.parentNode) {
          elem.parentNode.removeChild(elem);
        }
      // querySelectorAll, jquery, getElementsByClassName, getElementsByTagName
      } else {
        var elems = [];
        for(var j = 0; j<elem.length; j++) {
          if(elem[j]) {
            elems.push(elem[j]);
          }
        }
        for(var i=0; i<elems.length; i++) {
          if(elems[i].parentNode) {
            elems[i].parentNode.removeChild(elems[i]);
          }
        }
        return false;
      }
    }

调用者:

_remove(document.getElementById('someId'));
_remove(document.getElementsByClassName('someClass'));
_remove(document.getElementsByTagName('tag'));
_remove($('#someId));
_remove($('.someClass));
_remove(document.querySelectorAll('someID or Class or Tag));

Answer 1

其中一些函数返回一个实时 NodeList，这意味着当您更改 DOM 时，集合会立即更改以反射(reflect)这一点。这就是普通 for 循环不起作用的原因:当您删除 elem[0] 时，集合中的所有其他条目都会向下移动。然后，当您递增索引时，您将跳过新的 elem[0]。

解决此问题的最简单方法是从高端向下循环，而不是从 0 向上循环。

for (var j = elem.length-1; j >= 0; j--) {
    if (elem[j].parentNode) {
        elem[j].parentNode.removeChild(elem[j]);
    }
}