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