자식 노드 삭제

Question

내 온실 작업 판에 Dropbox에서 CV를 업로드 할 수있는 링크가 있습니다. Dropbox 링크를 제거해야합니다. 내가 document.getElementsByClassName("link-container")와 자식 노드를 식별 할 수 있지만 누구도 data-source="dropbox" 하나를 삭제할 수 있습니까?

<div class="link-container"> 
 
    <a data-source="attach" href="#">Attach</a> 
 

 
     <a data-source="dropbox" href="#">Dropbox</a> 
 
     <a data-source="google-drive" href="#">Google Drive</a> 
 

 
     <a data-source="paste" href="#">Paste</a> 
 
</div>

Answer 1

나는 다음과 같은 ES6 Array.from() 화살표 기능 –를 사용하여 –을 건의 할 것입니다 : ES6없이

// assuming there might be more than one element to be removed from 
 
// the document, here we use document.querySelectorAll() to retrieve 
 
// all <a> elements with a 'data-source' attribute equal to 'dropbox': 
 
var targets = document.querySelectorAll('a[data-source=dropbox]'); 
 

 
// we convert the NodeList from document.querySelectorAll() into an 
 
// an Array in order to use Array.prototype.forEach() to iterate 
 
// over the elements: 
 
Array.from(targets).forEach(
 

 
    // now we use an Arrow function expression to access the 
 
    // current array-element of the array over which we're 
 
    // iterating (the 'dropboxLink' variable), and then 
 
    // perform the expression following the fat arrow ('=>') 
 
    // for each element of the array; finding the parentNode 
 
    // and removing that child from the parentNode: 
 
    dropboxLink => dropboxLink.parentNode.removeChild(dropboxLink));

<div class="link-container"> 
 
    <a data-source="attach" href="#">Attach</a> 
 

 
    <a data-source="dropbox" href="#">Dropbox</a> 
 
    <a data-source="google-drive" href="#">Google Drive</a> 
 

 
    <a data-source="paste" href="#">Paste</a> 
 
</div>

이 조금 더 자세한입니다 :

var targets = document.querySelectorAll('a[data-source=dropbox]'); 
 

 

 
// using function.prototype.call() to allow us to use 
 
// Array.prototype.slice() on the array-like NodeList, 
 
// converting it into an Array: 
 
Array.prototype.slice.call(targets) 
 

 
    // using Array.prototype.forEach: 
 
    .forEach(function(dropboxLink) { 
 
    // 'dropboxLink' refers to the current Array element 
 
    // of the Array over which we're iterating. 
 

 
    // and, again, we remove the current Array-element 
 
    // from its parentNode: 
 
    dropboxLink.parentNode.removeChild(dropboxLink); 
 
});

<div class="link-container"> 
 
    <a data-source="attach" href="#">Attach</a> 
 

 
    <a data-source="dropbox" href="#">Dropbox</a> 
 
    <a data-source="google-drive" href="#">Google Drive</a> 
 

 
    <a data-source="paste" href="#">Paste</a> 
 
</div>

참고 :

• Array.from().
• Array.prototype.forEach().
• Array.prototype.slice().
• Arrow Functions.
• document.querySelectorAll().
• Function.prototype.call().
• Node.parentNode.
• Node.removeChild().