JavaScript lastChild 问题

Question

当我在现有段落前后的文本字段中添加文本时，删除按钮功能完美。但是，如果我在添加元素之前单击删除按钮，您必须单击两次才能删除不是由函数创建的段落。

这里可能有什么问题？我在添加和删除时在 Firebug 中观察 DOM，在添加新元素之前，我的删除按钮在第一次点击时不针对“firstDiv”，但在第二次点击时这样做。

这里是问题函数:

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

这是 fiddle :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