刪除子節點

Question

在我的Greenhouse工作板上，有一些鏈接允許申請人從Dropbox上傳他們的簡歷。我需要刪除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()和箭頭功能–建議–如下：

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

沒有ES6這是一個有點冗長：

個

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()。