使用JavaScript清除div元素

时间:2016-09-24 14:30:54

标签: javascript html

onclick元素上的

<li>,我希望div清除id。我有一个代码

javascript这就是我在div中编写代码的方式:

document.getElementById("outputLaps").insertAdjacentHTML(
                "beforebegin",
                <br /> + "some code";

这就是我试图清除div的方式:

document.getElementById("outputLaps").innerHTML = '';

var myNode = document.getElementById("outputLaps");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
}

但它们不起作用。

@EDIT 好的,我从答案中尝试了一些解决方案,但它们没有正常工作。我会再次尝试解释它。 我有两个要素。当我点击一个时,它会向div添加一些内容。当我点击第二个元素时,我想清除这个div,而不是完全破坏它。答案中的一些解决方案只清除了我在第一个元素添加一些代码之前在div中写的东西。

HTML

        <ul>            
            <li id="lap" onclick="displayLap()">Lap</li>
            <li id = "clear" onclick="clearLaps()">Clear laps</li>
        </ul>
<div id="outputLaps">rr</div>

点击添加文字的第一个元素:

function displayLap() {
    numberOfLap++;        
    document.getElementById("outputLaps").insertAdjacentHTML(
            "beforebegin",
            " Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":" + milliseconds
    );

}

然后我想用这个函数清除它:

function clearLaps() {

}

4 个答案:

答案 0 :(得分:1)

你很亲密:

{{1}}

答案 1 :(得分:1)

你可以使用它。

var node = document.getElementById("outputLaps");
node.parentNode.replaceChild(node.cloneNode(false), node);

或者如果你想破坏所有。

var node = document.getElementById("outputLaps");
node.parentNode.removeChild(node);

答案 2 :(得分:1)

好的,我终于创造了我想要的东西。谢谢大家的回答。我不得不改变向div添加文本的方式,不得不在文本上进行全部更改,以便innerHTML可以轻松清除它。我不得不使用<br />而不是&#34; \ n&#34;,因此它会正确显示下一个文本。我现在在这里:

HTML

      <ul>
            <li id="lap" onclick="displayLap()">Lap</li>
            <li id = "clear" onclick="clearLaps()">Clear laps</li>
       </ul>
<div id="outputLaps"></div>

JS

function displayLap() {
    numberOfLap++;
    var str = "Number of lap: " + numberOfLap + " time: " + minutes + ":" + seconds + ":0" + milliseconds + "\n";
    document.getElementById("outputLaps").appendChild(
            document.createTextNode(str))
}
function clearLaps() {
    numberOfLap = 0;
    document.getElementById("outputLaps").innerHTML = "";
}

答案 3 :(得分:0)

用于javascript使用UPDATE

.remove()

你可以在jquery中做到这一点

document.getElementById("outputLaps").remove();