How to remove div elements with Javascript?

Question

Lets say I have a webpage, and all I'm interested is the div with id "content", i.e:

<div id="content"></div>

How do I remove all the other div elements, and just display the div I want?

Are you sure you want to "remove all the other div elements"? From the entire page? — thirtydot
– thirtydot, Commented Mar 9, 2011 at 13:44
I suppose you only mean to remove sibling div elements, ie not ancestors (that would mean removing the #content node itself) nor descendants... — Nicolas Le Thierry d'Ennequin
– Nicolas Le Thierry d'Ennequin, Commented Mar 9, 2011 at 13:47
@thirtydot yes, because I'm only interested in the content of the webpage, if the webpage has like #nav, #footer, #header which are parent nodes, I don't want it... all I want is the #content and its child elements... — chutsu
– chutsu, Commented Mar 9, 2011 at 13:54

jAndy · Accepted Answer · 2011-03-09 13:55:21Z

7

var all_div_nodes = document.querySelectorAll('div'),
    len           = all_div_nodes.length,
    current       = null;

while( len-- ) {
    current = all_div_nodes[len];
    if( current.parentNode ) {
        if( current .id !== 'content' )
            current .parentNode.removeChild( current );
    }
}

If you can afford using a library like jQuery, this would be even more trivial:

$('div').not('#content').remove();

edited Mar 9, 2011 at 13:55

answered Mar 9, 2011 at 13:45

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Livingston Samuel Over a year ago

use document.getElementsByTagName instead of document.querySelectorAll in for support in browsers that do not support the later.

Itay Moav -Malimovka Over a year ago

will $('div').not('#content').remove(); not remove a parent which is a div?

Livingston Samuel Over a year ago

@jAndy caching the all_div_nodes[len] would perform much faster and why do need to check for the presence of parentNode for each div? (this would be required only if your html document is malformed)

jAndy Over a year ago

@Itay: .not() filters the current set and removes all matches.,

MooGoo Over a year ago

I don't like this...seems way more verbose and complicated than needed...and not particularly compatible to boot.

|

Nicolas Le Thierry d'Ennequin · Accepted Answer · 2011-03-09 13:52:31Z

0

If you want to remove the sibling DIVs, using jQuery, you can write:

$("#content").siblings("div").remove();

answered Mar 9, 2011 at 13:52

Nicolas Le Thierry d'Ennequin

6,1645 gold badges40 silver badges58 bronze badges

Collectives™ on Stack Overflow

How to remove div elements with Javascript?

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related