在具有id的div内的ul里面的li上的removeChild？

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> s感兴趣

Answer 3

DOM节点的子节点包括文本和注释，而不仅仅是元素，因此为了确定要删除的元素所在的索引，您需要考虑它们。 在您的情况下， <ul>第一个<li>的索引是1 。

您的`email'db的DOM如下所示：

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

如果你把字符串“email＃”变成一个链接......就像这样：

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

具有与此类似的功能。

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

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