removeChild на li внутри ul внутри div с идентификатором?

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 framework.

Answer 1

1) Более правильная строка:

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

2) Обратите внимание, что в "ul.childNodes [i]" i будет 0 для пробелов, 1 для <li>email1</li>, 2 для пробелов и т. Д. Вы должны использовать ul.getElementsByTagName ('li') [i], если вы Заинтересованы только в <li> с.

Answer 2

Наиболее правильно:

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

Answer 3

Если вы превратите строку «email #» в ссылку ... примерно так:

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

С функцией, подобной этой.

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

Хотя вы можете использовать removeElement () без onClick, но мне нравится простота, которую он позволяет.

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

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

. DOM для вашего div `email 'выглядит так:

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