从DOM中删除节点

Question

Noob question alert! I am working on a basic clock that updates every second, but its not updating because I get Uncaught Error: NOT_FOUND_ERR: DOM Exception 8. Basically i just need to change the removeChild() at the end of the function to something else, but I don't know what to change it to. I want to remove the <p class="time"> that is being created.

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

relevant HTML:

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

Answer 1

According to your question, you don't want to remove a child, you want to change the text of an existing element.

For this, you can use textContent :

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

It is to be noted that this isn't cross browser. IE8 and below work with innerText instead. A quick hack to use is this way:

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

However, it is a hack. It will work nicely for your case, but don't rely on this.

If you really want cross browser compatibility, you're using jQuery by the way (or any other library like this). jQuery way to change text:

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

It uses nodeValue , the only real cross-browser way to deal with text. It has to do this recursively though, because it is only available on textNodes . It is equivalent to using data (as @amnotiam does in the comments of your question).

Answer 2

You are not specifying a child node to be removed.

Node.removeChild

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

• child is the child node to be removed from the DOM.
• element is the parent node of child.
• oldChild holds a reference to the removed child node. oldChild == child

Answer 3

If you want to remove the timePlace element itself:

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

Assuming this is the intent, this works by by finding the relevant element/node ( getElementById() ), moving to the parentNode of that element and then removing the element from the parent (since removeChild() both expects a DOM node to be passed to it, and removes a child node of the current element/node).

---

Updated according to the comment from OP (below), simply use:

newTimeElem.parentNode.removeChild(newTimeElem);

References:

• removeChild() .

Answer 4

    <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>

Link: http://lib-eguide.nus.edu.sg/test1.php

Answer 5

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

Is what I was going for, though it might be better just to edit the content, this works for me very well.