Javascript - 使用getElementsByClassName刪除一個元素

Question

我對JavaScript不太熟悉，所以我被卡住了。 我需要從頁面中刪除頭等元素。

我發現這個腳本刪除所有類的元素，但我只需要刪除第一個。

var collection = window.content.document.getElementsByClassName("Links"); 

Array.prototype.forEach.call(collection, function(node) { 
    node.parentNode.removeChild(node); 
}); 

所以嘗試這一招哪些沒有做它的魔力

var collection = window.content.document.getElementsByClassName("Links")[0]; 

也試過，但withou結果

var collection = window.content.document.getElementsByClassName("Links"); 
var requiredElement = collection[0]; 
Array.prototype.forEach.call(requiredElement, function(node) { 
    node.parentNode.removeChild(node); 
}); 

所以大概的東西應該是這條線。

node.parentNode.removeChild(node); 

Answer 1

在這forEach回調函數，node僅僅是集合中的每個元素。但既然你現在有一個單一的元素，而不是元素的集合，你可以只是元素上執行該操作：

var collection = window.content.document.getElementsByClassName("Links"); 
var requiredElement = collection[0]; 
requiredElement.parentNode.removeChild(requiredElement); 

Answer 2

var elems = document.getElementsByClassName('box'), //catch all desired elements 
 
    parent = document.getElementById('parent'); //catch the parent element 
 

 
    parent.removeChild(elems[0]); //remove the first element from the parent

.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: blue; 
 
    margin: 5px; 
 
}

<div id='parent'> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
</div>

Answer 3

document.querySelector(".Links").remove();

<div class="Links">1</div> 
 
<div class="Links">2</div>

並且由於querySelector返回第一個匹配（如果存在）比.remove()將只刪除第一個元素。

Answer 4

它不會工作，因爲每個作品陣列/數組結構。單個元素不是數組結構。 你可以這樣做：

var collection = window.content.document.getElementsByClassName("Links"); 
var node = collection[0]; 
node.parentNode.removeChild(node); 

Answer 5

如果需要從整個頁面刪除第一個 '鏈接' 類元素

 if (document.getElementsByClassName('links').length > 0) { 
     document.getElementsByClassName('links')[0].remove(); 
     }  

Answer 6

$(document).ready(function(){ 
 
    remove_first_element("hello"); 
 
}); 
 
function remove_first_element(class_name) 
 
{ 
 
    var i=0; 
 
    $("."+class_name).each(function(){ 
 
     if(i==0) 
 
     { 
 
      $(this).remove(); 
 
      i++; 
 
     } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hello">hello 1</div> 
 
<div class="hello">hello 2</div>