使用 javascript 从 DOM 树中删除 p 元素答案

【问题标题】：remove p element from DOM tree with javascript使用 javascript 从 DOM 树中删除 p 元素
【发布时间】：2011-08-28 17:25:13
【问题描述】：

这应该是一个简单的问题，但我需要帮助来解决问题：我需要从 DOM 树中删除带有“goup”类的元素使用 javascript（最终使用原型，但没有其他库）。我不仅要隐藏该段落，还要将其从 DOM 树中完全删除。

我使用 getElementsByClassName 的解决方案不起作用。

function hidegoup() {
    var goup= document.getElementsByTagName("p")
        .getElementsByClassName("goup"); 
     goup.style.display = 'none';   
     goup.removeChild();
}

HTML：

<div id="poems">
    <div class="poem" id="d1">
        <p class="goup">
        <a href="#">To the top of the page</a>
        </p>
    </div>
</div>

【问题讨论】：

标签： javascript dom css-selectors getelementsbyclassname

【解决方案1】：

如果您想从 DOM 中删除 node，请使用：

node.parentNode.removeChild(node);

至于你想做什么：

function hidegoup() {
    var p_list = document.getElementsByTagName("p");
    for(var i=p_list.length-1; i>=0; i--){
        var p = p_list[i];
        if(p.className === "goup"){
            p.parentNode.removeChild(p);
        }
    }
}

【讨论】：

【解决方案2】：

getElementsByClassName 返回的是 NodeList，而不是 Node。您必须使用 for 循环对其进行迭代
不支持getElementsByClassName，除非在最近的浏览器中，您应该使用a library that abstracts the differences away
removeChild 删除调用它的元素的指定子元素：parent.removeChild(child);，您不要在要直接删除的元素上调用它。

【讨论】：

getElementsByClassName () 是 DOM Spec level 2 和 3 中的官方 Method 吗？
我不这么认为。不过它确实出现在 HTML 5 草案中。