CODEWITHSUNDEEP
javascripthtml
cerbin
cerbin

Reputation: 1189

Clearing div element using JavaScript

onclick on <li> element, I want to clear div which i will find by id. I have got a code

javascript this is how i writing code in a div:

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

And that's how i try to clear the div:

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

or

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

But they don't work.

@EDIT Ok, i tried some solutions from answer but they are not working fine. I will try to explain it one more time. I've got two elements. When i click on one, it adds some content to div. When i click on second element, i want to clear this div, not completely destroy it. Some solutions from the answers clear only something that i wrote in the div before first element add some code to it.

HTML

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

First element on click add text:

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

}

Then i want to clear it with this function:

function clearLaps() {

}

Upvotes: 1

Views: 4720

Answers (4)

cerbin
cerbin

Reputation: 1189

Ok, I finally created what I wanted. Thanks everyone for answer. I had to change the way of adding text to the div, had to change it all on text so the innerHTML could clear it easy. I had to not use <br /> but instead of "\n", so it display next text properly. Here what I have now:

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 = "";
}

Upvotes: 1

Bibek Shakya
Bibek Shakya

Reputation: 1273

for javascript use .remove()

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

you can do this in jquery 

$(function() {
   $("li").on("click",function() {
    $("#outputLaps").remove();
 });
});

Upvotes: 0

user123123123
user123123123

Reputation: 318

You can use this.

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

Or if you want to destroy all.

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

Upvotes: 1

MarZab
MarZab

Reputation: 2623

You were close:

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

Upvotes: 1

Related Questions