直接从body标签中删除没有被另一个父HTML元素包装的元素

remove desired elements directly from body tag which are not wrapped by another parent html element

本文关键字：元素 另一个 HTML 包装 body 标签 删除      更新时间：2023-09-26

我只是在试验是否有可能删除未被另一个元素包装并且我可以通过getElementById()方法访问的所需元素。这里我放了两个段落标签和一个按钮。我附加了一个onclick事件，它应该删除段落元素，但它们并没有完全删除。它一个接一个地删除它们，我的意思是我必须点击两次按钮来删除所有两个段落标签。如何解决这个问题?

<html>
<head>
<style>
</style>
</head>
<body>
<p>ddd</p>
<p>fff</p>
<input type='button' value='remove all elements' onClick="removeall()">
<script>
function removeall(){
  var para=document.getElementsByTagName('P');
  alert(para.length);
  for(i=0;i<para.length;i++){
     document.body.removeChild(para[i]);
  }
}
</script>
</body>

代码的问题是，每次从数组中删除一个元素时，数组(实际上不是一个数组，而是一个活动集合)的长度都会减少。所以你会用for循环去除了一半的<p>元素。您可以使用while循环，并删除数组的第一个元素，直到数组为空。

这是正确的代码:

function removeall() {
    var para = document.getElementsByTagName('P');
    while(para.length) para[0].parentNode.removeChild(para[0]);
}
以上代码将删除所有文档中的<p>元素。

在你的代码中，你使用document.body.removeChild(...)，它工作得很好，但不是很好，因为如果一些<p>元素在另一个元素内部(不是直接在<body>内部)，它将不会被删除，它会导致错误。

所以如果你只想从body中删除<p>元素，你可以这样做:

function removeall_frombody() {
    var para = document.querySelectorAll('body > p');
    while(para.length) document.body.removeChild(para[0]);
}

这里的问题是para是一个活动集合。因此，当您删除第一段时，para改变并成为仅包含一个元素的集合，终止for循环，因为para.length变为1。

要避免这种情况，请将集合转换为数组:

function removeall(){
   var para = [].slice.call(document.getElementsByTagName('P'));
   for(var i = 0; i < para.length; i++){
      document.body.removeChild(para[i]);
   }
}

或者从末尾开始迭代:

for (var i = para.length; i--;)
    document.body.removeChild(para[i]);

其他人建议使用while循环:它也很好。

相关文章：