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，但我只是喜歡它允許的簡單性。