Question

我尝试使用此代码删除正文中的所有其他元素，但它不起作用。

s = document.body.childNodes;
for (var i = 1; i < (s.length / 2); i++) {
  if ((i % 2) == 0) {
    document.body.removeChild(s[1]);
  } else {
    document.body.removeChild(s[0]);
  }
}

<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></div>
  <div id="div6"></div>
</body>

Answer 1

首先，您需要使用children或querySelectorAll()而非childNodes获取元素，childNodes将获取包含文本的所有节点。请尝试以下代码：

var s = document.body.children;
var itemCount = s.length;

for (var i = 0; i < itemCount; i++)
{
   if (i % 2 !== 0)
   {
     document.body.removeChild(s[i]);
   }
}

以下是JSBin示例。

请注意，在JSBin中我们使用querySelectorAll()获取元素，因为它还在正文中添加了脚本元素，例如：

var s = document.querySelectorAll('div');

另请注意，IE8及以下版本在使用children时包含注释节点。

Answer 2

您的代码存在许多问题。首先，逻辑是关闭的，但是代码如何处理DOM操作存在一些主要问题：

您的HTML会导致在元素之间创建文本节点。并且您的代码无法解决此问题。
从父元素中删除节点时，childNodes列表会发生变化。

使用此HTML：

<div id="test-container">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
</div>

这个JavaScript：

var container = document.getElementById("test-container");
var child = container.firstElementChild;
var remove = true;
while (child) {
    var next = child.nextElementSibling;
    if (remove)
        container.removeChild(child);
    remove = !remove;
    child = next;
}

我可以删除所有其他孩子。我通过使用firstElementChild和nextElementSibling来避免我之前指出的两个问题。

Answer 3

您需要知道更新dom时nodeList将更新，这意味着如果要删除第一个子节点，列表中的元素0将不会引用null，而是指向的节点最初的孩子1。

这意味着如果你想删除节点0,2,4,6 ......你实际上必须删除0,1,2,3,4 ...（因为nodeList总是会更新）：

var body = document.body;
// Consider that you might want to use `body.children` instead of 
// `body.childNodes` because it excludes all text nodes 
var nodes = body.childNodes; 
var len = nodes.length / 2;

for ( var i = 0; i < len; i++ ) {
    body.removeChild(nodes[i]);
}

我知道它可以接缝有点奇怪，但这实际上会删除所有节点：0,2,4,6 ......

See more at MDN

Answer 4

我只使用querySelectorAll与:nth-child(odd)选择器：

var divs = document.querySelectorAll('body > div:nth-child(odd)');
divs = [].slice.call(divs); // convert from NodeList to real array

divs.forEach(function(elem) {
  document.body.removeChild(elem);
});

jsFiddle

Answer 5

为什么不使用jQuery而只是这样做：

$('.remOdd').on('click', function(){
  $('div').filter(':odd').remove();
})

http://jsfiddle.net/dh5uymzL/

当然，如果你愿意，可以使用“：even”

http://api.jquery.com/filter/

JS删除所有其他元素

5 个答案: