检查父容器的儿童javascript

问题描述：

只是想知道如何检查元素（即按钮）的元素（即div容器），如果它们存在，删除它们？检查父容器的儿童javascript

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

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

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

干杯

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

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

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

答

获取的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/

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

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

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

答

你可以使用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]);

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

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

答

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

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

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

检查父容器的儿童javascript

相关推荐