JavaScript lastChild問題

Question

當我在現有段落之前和之後的文本字段中添加文本時，remove按鈕功能完美。但是，如果在添加元素之前單擊刪除按鈕，則必須單擊TWICE以刪除不是由函數創建的段落。

這裏有什麼問題？我在添加和刪除Firebug的過程中觀察DOM，並且在添加新元素之前，我的刪除按鈕不會在第一次點擊時指向「firstDiv」，而是在第二次單擊時指向「firstDiv」。

這裏的問題是功能：

function removeIt() { 
    firstDiv.removeChild(firstDiv.lastChild); 
} 

這裏是小提琴：http://jsfiddle.net/nxpeD/2/

感謝您的幫助！

Answer 1

這是因爲你在最後有文本節點（空格），所以最後一個段落不是最後一個子元素（它是最後一個子元素）。

然後，使用

function removeIt() { 
    firstDiv.removeChild(firstDiv.lastElementChild); 
} 

演示：http://jsfiddle.net/nxpeD/6/

兼容性：爲了使舊瀏覽器，你也可以使用

function removeIt() { 
    if (firstDiv.lastElementChild) { 
     firstDiv.removeChild(firstDiv.lastElementChild); 
    } else { 
     var last; 
     while((last = firstDiv.lastChild).nodeType !== 1) { 
      firstDiv.removeChild(last); 
     } 
     firstDiv.removeChild(last); 
    } 
} 

參考

• lastChild
• lastElementChild

Answer 2

用途：

firstDiv.removeChild(firstDiv.lastElementChild); 

既然有格式化你的HTML新行字符，這將被視爲一個孩子爲好股利。因此，您需要使用lastElementChild來獲取元素並忽略外部的格式和其他文本節點。

Demo

的LAST_CHILD返回是一個節點。如果它的父元素是一個元素，那麼該子元素通常是元素節點，文本節點或註釋節點。如果沒有子元素，則返回null。

lastElementChild