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>