javascript中的元素删除[重复项]

Question

此问题已经在这里有了答案：

removeChild() method is breaking for loop（4个答案）

JavaScript DOM remove element（4个答案）

关闭7小时前。

我想使用javascript从我的div元素中删除特定的子元素，但我无法做到这一点。这是元素的格式

<div class="div1">
<span class="spanp">span1<span class="spanc">spanchild1</span></span>
<span class="spanc">spanc</span>
<span class="spanp">span2<span class="spanc">spanchild2</span></span>
<span class="spanc">spanc</span>
<span class="spanp">span3<span class="spanc">spanchild3</span></span>
<span class="spanc">spanc</span>
</div>

我只想删除class =“ spanc”的span元素。我如何仅使用JavaScript才能做到这一点

var list=document.getElementsByClassName("spanc");
for(var i=0;i<list.length;i++){
list[i].parentNode.removeChild(list[i]);
}

当我运行此命令时，我只能删除奇数索引上的主要spanc类元素和类spanp元素的子元素。即使索引spanp类子元素也仍在列表中

Answer 1

我想这可以解决问题：

const spanc = document.querySelectorAll('.div1 .spanc');
spanc.forEach(node => node.remove());

Answer 2

所以问题的一部分是您要删除的跨度具有不同的父元素；有时是跨度，否则是div。

const itemsToRemove = document.getElementsByClassName('spanc');
const parents = document.getElementsByClassName('spanp');
[...parents].forEach(span => {
  const itemsToRemove = span.getElementsByClassName('spanc');
  [...itemsToRemove].forEach(item => span.removeChild(item));
});

const outerParent = document.getElementsByClassName('div1')[0];
const upperItemsToRemove = outerParent.getElementsByClassName('spanc');
[...upperItemsToRemove].forEach(item => outerParent.removeChild(item));

<div class="div1">
  <span class="spanp">span1<span class="spanc">spanchild1</span></span>
  <span class="spanc">spanc</span>
  <span class="spanp">span2<span class="spanc">spanchild1</span></span>
  <span class="spanc">spanc</span>
  <span class="spanp">span2<span class="spanc">spanchild1</span></span>
  <span class="spanc">spanc</span>
</div>

Answer 3

感谢您通过使用while循环而不是forloop获得答案的帮助>>

while(list.length>0){
let i=0;
list[i].parentNode.removeChild(list[i]);
}