删除某个孩子(或某些孩子)以外的所有孩子
我有一个包含许多孩子的元素。我想从这个元素中删除除了一个或更多个具有某个类别的所有孩子。删除某个孩子(或某些孩子)以外的所有孩子
我需要一种方法来去除所有的孩子除了那些我会继续选择性,通过他们的阶级(或长度),而不仅仅是作为第一个或最后。
这并没有帮助:
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);
这是我到底使用的代码。双重测试和工作。添加注释来解释完全是什么。
// 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.
您可以使用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]);
}
}
您可以通过遍历它们并移除不需要的元素来移除元素。
注意: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>
的所有元素,但我需要一种方法来的结果,使用了删除除了那些我会保留 的所有孩子的长度(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>
如果仍然出现'',什么是'-n + 3'?谢谢。 – OsiOs
@OsiOs您是否阅读过链接的MDN文档? _“':nth-child(-n + 3)'代表一组兄弟中的前三个元素。”_。前三个''元素被选中并从父节点中移除。如果要求删除父节点的前三个子节点,为什么你会期望''被删除? – guest271314
我没有看到任何链接到MDN,所以没有阅读。我不知道它需要**第一个**三个下来,但现在它是有道理的,当然''应该留下。谢谢。 – OsiOs
你还没有告诉我们什么业务逻辑是哪些元素保留,哪些去。 – Utkanos
不知道我理解了评论...你的意思是,为什么我想把它们取下来? – OsiOs