Question

我有一个包含很多孩子的元素。我希望从该元素中删除除了一个或多个特定类之外的所有子项。

我需要一种方法来删除所有那些我将保持选择性的孩子，他们的班级（或长度），而不仅仅是第一个或最后一个。< / p>

这没有帮助：

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获取子节点列表并循环遍历该数组。

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

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

的所有元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

但我需要一种方法除去那些我会保留的孩子选择性地，通过它们的长度（1,2,3）或指数（0,1,2）而不仅仅是它们是第一个或最后一个。

您可以使用.querySelectorAll()并将-n+3传递给[:nth-child(][1]) psuedo类选择器

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.

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

4 个答案: