2011-08-18 79 views
1

只是想知道如何检查元素(即按钮)的元素(即div容器),如果它们存在,删除它们?检查父容器的儿童javascript

如果我将一个孩子附加到一个div上,我怎么能在下一次看起来检查那个孩子或那些类型的孩子?即加入;

example = document.getElementById('div'); 
example.appendChild(aButton); 

//loop to look for aButton/button type in example div 

干杯

+1

完全相同的副本http://stackoverflow.com/questions/2161634/how-to-check-if-element-has -any-children-in-javascript – Saul

+0

你是否反对使用JavaScript框架如jQuery?他们倾向于使这种任务更简单。 –

+1

@Saul检查一般的孩子,检查 - 然后去除 - 特定类型的孩子并不是一回事。 –

回答

1

获取的childNodes数组,遍历,寻找一个符合您的条件(输入标签用类型的按钮,或者可能是一个按钮标签)

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

实施例:http://jsfiddle.net/BZMbk/3/

+0

我得到了这个工作。我个人遇到的问题是,随着我递增,容器的大小随着我移除孩子而变小,因此每次都会移除大约一半的按钮。 魔术1只是第一个附加的我不想碰的其他子元素。 \t 'var children = buttonContainer.childNodes; \t var childrenLength = children。长度 - 1; \t \t 为(VAR I = 0; I myol

+2

@ r34ch当你想要移除元素的数组迭代时,诀窍是向后移动,所以你从最后一个元素开始,朝向第一个元素。元素索引(按列表中的顺序)您删除的元素索引将会改变,但由于您已经对这些元素进行了迭代,所以这不是问题。 –

+0

@Anthony未来我会记得。我今天在常识方面很短暂.. – myol

0

你可以使用children,然后遍历孩子。例如,如果您有以下设置一个div:

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

然后,您可以让孩子一个循环通过他们这样的:

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

而且,以消除他们来说,这将是一样简单作为

example.removeChild(children[i]); 
+0

这很好地工作,除了它发现不是按钮的孩子,也删除了那个孩子,这也是我想要避免的 – myol

+0

你仍然需要在if(children [i] .tagName =='input' && children [i] .type ==“button”)或任何你想要删除的元素 – scrappedcola

1

若要取得从文档的子集的节点类型的元素,你可以简单地做

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

这将返回任何按钮的元素与“格”(不是一个好名字的ID BTW)的ID