删除除一个或多个子元素之外的元素的所有子元素

Question

我有一个包含许多孩子的元素。 我想从该元素中删除除具有特定类的1个或多个孩子以外的所有孩子。

我需要一种方法， 除了我要选择性保留的所有孩子之外，还需要根据他们的班级（或长短）而不仅仅是首先还是最后一位。

这没有帮助：

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

您可以使用document.querySelector（）。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 2

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

注意：querySelectorAll（）。forEach（）不适用于所有浏览器。 因此，只需对querySelectorAll（）的结果使用for

下面将删除所有包含类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 3

但是我需要一种方法，除了我将选择性保留的所有子项之外，还可以通过其长度（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> 

Answer 4

这是我最后使用的代码。 经过双重测试和工作。 添加了注释以解释确切执行的操作。

// 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.