특정 자식 (또는 특정 자식) 이외의 요소의 모든 자식 제거

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

에 내가 마지막에 사용 된 코드를 -n+3를 전달합니다. 이중 테스트를 거쳐 작동합니다. 정확히 완료된 설명을 추가했습니다.

// 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()를 사용할 수 있으며 이것은 [: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>