This should be a simple one, and yet I need help to solve the problem: I need to remove the element with the class "goup" on it from the DOM tree with javascript (eventually with prototype, but no other library). I don't only want to hide that paragraph, but remove it entirely from the DOM tree.

My solution to use getElementsByClassName does not work.

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

THE HTML:

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

This should be a simple one, and yet I need help to solve the problem: I need to remove the element with the class "goup" on it from the DOM tree with javascript (eventually with prototype, but no other library). I don't only want to hide that paragraph, but remove it entirely from the DOM tree.

My solution to use getElementsByClassName does not work.

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

THE 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

Share Follow edited May 19, 2011 at 9:34 JohnP 50k1313 gold badges112112 silver badges141141 bronze badges asked May 19, 2011 at 9:22 AKnoxAKnox 6311 gold badge22 silver badges44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

if you want to remove a node from the DOM, use:

node.parentNode.removeChild(node);

as to what you want to do:

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);
        }
    }
}

1. getElementsByClassName returns a NodeList, not a Node. You have to iterate over it with a for loop
2. getElementsByClassName is not supported except in recent browsers, you should probably use a library that abstracts the differences away
3. removeChild removes the specified child of the element upon which it is called: parent.removeChild(child);, you don't call it on the element you want to remove directly.