Hey guys i am learning JS, the thing is i made a simple application which display the multiplication table of the input number. The problem is that when i enter a number again the it will print below the previous multiplication table so i want to delete all the child element of div tag when i enter a number again

function print() {
    var box = document.getElementById("table");

    for(let i=1 ; i<=10 ; i++) {
        var t = document.getElementById("tabInput").value;
        var t_Element = document.createElement("p");
        var t_line = document.createTextNode(t + " x " + i + " = " + t*i);
        t_Element.appendChild(t_line);
        box.appendChild(t_Element);
    }
}

Hey guys i am learning JS, the thing is i made a simple application which display the multiplication table of the input number. The problem is that when i enter a number again the it will print below the previous multiplication table so i want to delete all the child element of div tag when i enter a number again

function print() {
    var box = document.getElementById("table");

    for(let i=1 ; i<=10 ; i++) {
        var t = document.getElementById("tabInput").value;
        var t_Element = document.createElement("p");
        var t_line = document.createTextNode(t + " x " + i + " = " + t*i);
        t_Element.appendChild(t_line);
        box.appendChild(t_Element);
    }
}

• javascript

• Can you show us what you've tried? so that we can help you better – Thum Choon Tat Commented May 10, 2018 at 9:30
• Need an identifier for the div. – Cillian Collins Commented May 10, 2018 at 9:34
• "Table" is the identifier of div – user9063381 Commented May 10, 2018 at 9:40
• This is exactly the same question stackoverflow.com/questions/3955229/… – Tamás Varga Commented May 10, 2018 at 9:54

3 Answers 3

If you need to clear ALL elements, then there is no need to iterate through them.

You can just clear the innerHTML of the div like so:

document.getElementById('yourdivid').innerHTML = '';

And then you can proceed with the rest of your code that creates the new elements

If you clear the html with innerHTML = '', you still are going to have those previous html nodes loaded. For now the best way to do it is to iterate and destroy each node with

while (box.hasChildElements()) {
  box.removeChild(box.lastChild)
}

if you have a lot of elements and need a really fast way, you can clone the node with false deep option then replace it.

const parentNode = document.querySelector("#parentNode");
const replacedNode = document.querySelector("#replacedNode");
const newNode = replacedNode.cloneNode(false);
parentNode.replaceChild(newNode, replacedNode)