Question

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

这里有什么问题？当我添加和删除时，我在Firebug中观看DOM，在添加新元素之前，我的删除按钮在第一次单击时不会以“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);
    }
}

<强>参考

Answer 2

使用：

 firstDiv.removeChild(firstDiv.lastElementChild);

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

<强> Demo

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

<强> lastElementChild

JavaScript lastChild问题

2 个答案: