刪除某個孩子（或某些孩子）以外的所有孩子

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>