删除某个孩子（或某些孩子）以外的所有孩子

Question

我有一个包含许多孩子的元素。我想从这个元素中删除除了一个或更多个具有某个类别的所有孩子。

我需要一种方法来去除所有的孩子除了那些我会继续选择性，通过他们的阶级（或长度），而不仅仅是作为第一个或最后。

这并没有帮助：

let rightCol = document.querySelector("#rightCol"); 
let toSave = rightCol.querySelectorAll('._4-u2._3-96._4-u8'); 
let toSaveArr = []; 

toSave.forEach(()=>{ 
    toSaveArr.push(toSave); 
}); 

rightCol.innerHTML = ''; 
rightCol.appendChild(toSaveArr); 

Answer 1

这是我到底使用的代码。双重测试和工作。添加注释来解释完全是什么。

// Delete all children besides exceptions (first instance of exception - FIOE): 

    let rightCol = document.querySelector("#rightCol"); 
    let sC1 = document.querySelector('#mySelector1'); // FIOE number 1. 
    let savedArr = []; 
    savedArr.push(sC1); // Push saved FIOEs to the savedArr to actually save them. 
    rightCol.innerHTML = ''; // Delete all data. 

for (var i = 0; i < savedArr.length; i++) { 
    rightCol.appendChild(savedArr[i]); 
}; // Retrieve data from the array. 

Answer 2

您可以使用document.querySelector（）的childNodes通过阵列来获得子节点和循环列表。

在每个循环中检查属性并选择跳过不想删除的元素。

childNodes

我不知道是什么条件，所以我留给你。这是我的方式：

也许向前循环不会改变索引，但我不确定，所以向后循环可以避免这个问题。

var children = document.querySelector("#rightCol").childNodes; 
for(var i=children.length - 1; i>= 0; i--){ 
    if(condition with children[i] is met){ 
     document.querySelector("#rightCol").removeChild(children[i]); 
    }else if(condition with i index is met){ 
     document.querySelector("#rightCol").removeChild(children[i]); 
    } 
} 

Answer 3

您可以通过遍历它们并移除不需要的元素来移除元素。

注意：querySelectorAll（）。forEach（）不适用于所有浏览器。所以只是querySelectorAll（）

下面将删除包含该类a

document.querySelectorAll('#my_div > p.a').forEach(el => { 
 
    el.parentNode.removeChild(el) 
 
})

<div id="my_div"> 
 
    <p class="a">A</p> 
 
    <p class="b">B</p> 
 
    <p class="a">A</p> 
 
    <p class="a">A</p> 
 
    <p class="B">B</p> 
 
    <p class="B">B</p> 
 
</div>

Answer 4

的所有元素，但我需要一种方法来的结果，使用了删除除了那些我会保留 的所有孩子的长度（1,2,3）或索引（0,1,2），而不仅仅是 是第一个或最后一个。

可以使用.querySelectorAll()并传递到-n+3 [:nth-child(][1])伪类选择

let nodes = document.querySelector("div") 
 
      .querySelectorAll("div :nth-child(-n+3)"); 
 

 
nodes.forEach(node => node.parentNode.removeChild(node));

<div> 
 
    <span>0</span> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
</div>