javascript中的元素删除

Question

我想使用 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 类元素和类 Spap 元素的子元素。偶数索引 Spap 类子元素仍在列表中

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]);

}