2

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

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

这是问题函数：

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

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

谢谢您的帮助！

4

2 回答 2

3

那是因为末尾有文本节点（空格），所以最后一段不是最后一个子元素（它是最后一个元素子元素）。

然后，使用

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

参考

于 2013-10-04T01:42:37.223 回答
2

采用：

 firstDiv.removeChild(firstDiv.lastElementChild);

由于在您的 html 中有格式化新行字符，因此它也将被视为 div 的子元素。所以你需要使用lastElementChild获取元素而忽略外部的格式和其他文本节点。

演示

返回的 last_child 是一个节点。如果其父节点是元素，则子节点通常是 Element 节点、Text 节点或 Comment 节点。如果没有子元素，则返回 null。

最后一个元素子

于 2013-10-04T01:43:09.270 回答