使用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时,集合会立即更改以反映这一点.这就是普通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]);
    }
}