Checking a parent container for children javascript

Question

Just wondering how you can check an element (i.e. a div container) for elements (i.e. buttons) and if they exist, remove them?

If I append a child to a div, how can I on the next look check for that child or those type of children? i.e. adding;

example = document.getElementById('div'); example.appendChild(aButton); //loop to look for aButton / button type in example div

Cheers

An exact duplicate of stackoverflow.com/questions/2161634/… — Saul
– Saul, Commented Aug 18, 2011 at 14:59
Are you against using a Javascript framework such as jQuery? They tend to make this kind of task much simpler. — Anthony Grist
– Anthony Grist, Commented Aug 18, 2011 at 15:00
@Saul Checking for children in general, and checking for - and then removing - children of a specific type are not the same thing. — Anthony Grist
– Anthony Grist, Commented Aug 18, 2011 at 15:01
It's as simple as document.getElementById('div').getElementsByTagName("button") — Joseph Marikle
– Joseph Marikle, Commented Aug 18, 2011 at 15:06

Dennis · Accepted Answer · 2011-08-18 15:57:04Z

1

Get the childNodes array, loop through and look for one matching your criteria ( input tag with type button, or possibly a button tag)

var children = example.childNodes; for(var i = 0; i<children.length; i++){ if( children[i].tagName == "INPUT" && children[i].type=='button' ) { example.removeChild( children[i] ); i--; //Decrement counter since we are removing an item from the list } }

Example: http://jsfiddle.net/BZMbk/3/

edited Aug 18, 2011 at 15:57

answered Aug 18, 2011 at 15:13

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

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

3 Comments

myol Over a year ago

I got this to work. The problem I came across personally was that as i incremented, the size of the container got smaller as I removed children, so It would remove about half the buttons each time. The magic 1 is simply the other child element appended first which I didn't want to touch. ' var children = buttonContainer.childNodes; var childrenLength = children.length - 1; for(var i=0; i<childrenLength; i++) { if( children[1].tagName == "INPUT" && children[1].type=='button' ) { buttonContainer.removeChild( children[1] ); } }'

Anthony Grist Over a year ago

@r34ch The trick when iterating over an array where you intend to remove elements is to do it backwards, so you start with the last element and work towards the first. The indexes of elements after (in terms of order in the list) the one you remove will change, but since you've already iterated over those this isn't a problem.

myol Over a year ago

@Anthony I'll remember that in future. I'm short on the common sense front today..

Joseph Marikle · Accepted Answer · 2011-08-18 15:08:33Z

To get elements that are of a node type from a subset of the document you can simply do

document.getElementById('div').getElementsByTagName("button")

This will return any buttons under an element with the id of "div" (not a good name for an id btw)

scrappedcola · Accepted Answer · 2011-08-18 15:07:20Z

You could use children and then loop through the children. For example if you have a div with the following set up:

<div id='div'> <input type='button'> <p>here</p> <a href="#"></a> </div>

You could then get the children an loop through them like this:

var example = document.getElementById("div"); var children = example.children; alert(children.length); for(var i = 0; i < children.length; i++) { alert(children[i].tagName); }

And as to remove them it would be as simple as

example.removeChild( children[i] );

This works nicely except it finds a child who is not a button and deletes that child as well which is what I wish to avoid
You still need to add an if block around the part that deletes to the affect of if(children[i].tagName == 'input' && children[i].type == "button") or whatever element you want to delete

Collectives™ on Stack Overflow

Checking a parent container for children javascript

3 Answers 3

3 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Linked

Related