javascript - 从 DOM 中移除节点

Question

菜鸟问题提醒！我正在研究一个每秒更新的基本时钟，但它没有更新，因为我收到未捕获错误：NOT_FOUND_ERR：DOM Exception 8。基本上我只需将函数末尾的 removeChild() 更改为其他内容，但我不知道改成什么。我想删除<p class="time">正在创建的。

function spitTime() {
    var clock = new Date();
    var hours = clock.getHours();
    var minutes = clock.getMinutes();
    var seconds = clock.getSeconds();

    if (minutes <= 9) {
        minutes = "0" + minutes;
    }

    if (seconds <= 9) {
        seconds = "0" + seconds;
    }

    var displayTime = hours + ":" + minutes + ":" + seconds;
    var newTimeElem = document.createElement("p");
    newTimeElem.className = "time";
    var timeText = document.createTextNode(displayTime);
    newTimeElem.appendChild(timeText);
    document.getElementById("timePlace").appendChild(newTimeElem);
    document.getElementById("timePlace").removeChild();
}

相关HTML：

<div class="clock">
    <span id="timePlace"></span>
</div>

score 2 · Accepted Answer

根据您的问题，您不想删除孩子，而是想更改现有元素的文本。

为此，您可以使用textContent：

document.getElementById( 'timePlace' ).textContent = displayTime;

需要注意的是，这不是跨浏览器。IE8 及以下版本可innerText改为使用。一个快速的使用方法是这样的：

var timePlace = document.getElementById( 'timePlace' );
if ( 'textContent' in timePlace ) {
    timePlace.textContent = displayTime;
}
else {
    timePlace.innerText = displayTime;
}

但是，这是一个黑客。它适用于您的情况，但不要依赖于此。

如果你真的想要跨浏览器兼容性，顺便说一下，你正在使用 jQuery（或任何其他类似的库）。jQuery改变文本的方法：

$( '#timePlace' ).text( displayTime );

它使用nodeValue, 唯一真正的跨浏览器方式来处理文本。但它必须递归地执行此操作，因为它仅适用于textNodes. 它相当于使用data（正如@amnotiam 在您的问题评论中所做的那样）。

score 1 · Accepted Answer

您没有指定要删除的子节点。

Node.removeChild

var oldChild = element.removeChild(child);
element.removeChild(child);

child 是要从 DOM 中删除的子节点。
element是child的父节点。
oldChild 持有对已移除子节点的引用。oldChild == 孩子

score 0 · Accepted Answer

如果要删除timePlace元素本身：

document
    .getElementById("timePlace")
    .parentNode
    .removeChild(document.getElementById('timePlace'));

假设这是意图，这通过找到相关元素/节点 ( ) 、getElementById()移动到该parentNode元素的当前元素/节点的节点）。removeChild()

根据 OP 的评论更新（如下），只需使用：

newTimeElem.parentNode.removeChild(newTimeElem);

参考：

removeChild().

score 0 · Accepted Answer

    <script type="text/javascript"> 
        function spitTime() {
            var clock = new Date();
            var hours = clock.getHours();
            var minutes = clock.getMinutes();
            var seconds = clock.getSeconds();

            if (minutes <= 9) {
                minutes = "0" + minutes;
            }

            if (seconds <= 9) {
                seconds = "0" + seconds;
            }

            var displayTime = hours + ":" + minutes + ":" + seconds;
            var newTimeElem = document.createElement("p");
            newTimeElem.className = "time";
            var timeText = document.createTextNode(displayTime);
            newTimeElem.appendChild(timeText);
            $('#timePlace').children('.time').remove();
            document.getElementById("timePlace").appendChild(newTimeElem);
            setTimeout('spitTime()', 100);
        }
        $(document).ready(function(){
            setTimeout('spitTime()', 100);
        });
    </script>
</head>
<body>
    <div class="clock">
        <span id="timePlace"></span>
    </div>
</body>

链接： http: //lib-eguide.nus.edu.sg/test1.php

score 0 · Accepted Answer

while (timePlace.firstChild) {
    timePlace.removeChild(timePlace.firstChild)
}

这就是我想要的，尽管编辑内容可能会更好，这对我来说非常有用。

javascript - 从 DOM 中移除节点

5 回答 5

Related

Reference