在具有id的div内部，删除ul中的li元素？

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框架的情况下完成此操作。

- Prozaker

---

你的代码是否产生任何可见结果？ - brettkelly

在onclick的开头不需要“javascript:”，只有在href中才需要。此外，它还缺少函数调用 - 应该是deleteEmail()。 - jimr

哦，是的，我输入了但忘记加括号了，谢谢。 - Prozaker

@inkedmn，在Firebug上它报错说removeChild不是ul的一个方法:/ - Prozaker

Answer 1

最正确的方法：

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

- Aaron Butacov

Answer 2

1）更正确的字符串：

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

2) 注意，在 "ul.childNodes[i]" 中，i 为 0 表示空格，1 表示 <li>email1</li>，2 表示空格等。如果您只关心 <li>，则应使用 ul.getElementsByTagName('li')[i]。

- Pavel Strakhov

---

感谢额外的解释，真的很有帮助！ - Prozaker

Answer 3

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

`中第一个`
• `的索引是1。
  
  您的“email” div的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 );
  

- jimr

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

- Warty

Answer 5

如果您想将字符串 "email#" 转换为链接... 可以使用类似以下代码的函数：

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

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

虽然你可以在没有onClick的情况下使用removeElement()，但我喜欢它所提供的简单性。

- Brook Julias

---

或者只需 onclick="parentNode.removeChild(this)" - thorn0

这也非常有帮助，我肯定会基于这个解决方案来使用。 - Prozaker