removeChild在里面的一个ID内的UL里面的UL？

Question

我有一个网页下面的代码：

<div id="emails"> 
<ul> 
<li>email1</li> 
<li>email2</li> 
</ul> 
</div> 

<a href="#" onClick="deleteEmail()">click</a> 

，我想删除的第一封电子邮件，我一直想用这样的：

function deleteEmail(){ 
    var ul = document.getElementById('emails').getElementsByTagName('ul'); 
    ul.removeChild(ul.childNodes[0]); 
} 

IM还挺新的JavaScript的DOM，所以如果有更好的方法可以做到，请告诉我。

注：我想这样做没有任何一种js框架。

Answer 1

最正确的：

var ul = document.getElementById('emails').getElementsByTagName('ul')[0]; 
var li = ul.getElementsByTagName('li')[0]; 
ul.removeChild(li) 

Answer 2

1）更多正确的字符串：

var ul = document.getElementById('emails').getElementsByTagName('ul')[0]; 

2）应注意，在 “ul.childNodes [I]的” i将是0的空格，1 <li>email1</li> ，2表示空间等。如果您仅在<li> s有兴趣，您应该使用ul.getElementsByTagName（'li'）[i]。

Answer 3

DOM节点的子节点包含文本和注释，而不仅仅是元素，所以为了找出要删除的元素的索引，需要考虑它们。在你的情况下，<ul>中第一个<li>的索引是1。

的DOM你`电子邮件” DIV的样子：

DIV 
    text(whitespace) 
    UL 
    text (whitespace) 
    LI 
     text (email1) 
    text (whitespace) 
    LI 
     text (email2) 
    text (whitespace) 
    text (whitespace) 

话虽这么说，它可能比较容易直接找到<li>要删除，然后将其删除。

var toRemove = document. 
     getElementById('emails'). 
     getElementsByTagName('ul')[0]. 
     getElementsByTagName('li')[0]; 

toRemove.parentNode.removeChild(toRemove); 

Answer 4

<div id="emails"> 
<ul> 
<li>email1</li> 
<li>email2</li> 
</ul> 
</div> 

<a href="#" onClick="deleteEmail()">click</a> 
<!--note that I made it so you actually invoke deleteEmail --> 

，我想删除的第一封电子邮件，我一直想用这样的：

function deleteEmail(){ 
    //I believe you meant emails =/ 
    var ul = document.getElementById('emails').getElementsByTagName('ul'); 
    ul.removeChild(ul.getElementsByTagName("li")[0]); 
} 

Answer 5

如果你把字符串“电子邮件＃”到链接...东西像这样：

<a href="" onClick="removeElement(this.parentNode);return false">email1</a>

有了类似这样的功能。

function removeElement(childElm) { 
    var parentElm = childElm.parentNode; 
    parentElm.removeChild(childElm); 
} 

尽管您可以使用removeElement（）而不使用onClick，但我只是喜欢它允许的简单性。