removeChild на li внутри ul внутри div с id?

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]); 
} 

им своего рода новый для 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]" я буду 0 для пространств, 1 для <li>email1</li> , 2 для пробела и т. Д. Вы должны использовать ul.getElementsByTagName ('li') [i], если вы заинтересованы только в <li>.

Answer 3

Дети узла DOM включают текст и комментарии, а не только элементы, поэтому, чтобы выяснить, какой индекс должен удалить элемент, вы должны учитывать их. В вашем случае индекс первого <li> в <ul> составляет 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, но мне просто нравится простота, которую он позволяет.