How to delete all Child Elements from a div element using JS

Question

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

Can you show us what you've tried? so that we can help you better — Thum Choon Tat, May 10 '18 at 09:30
This is exactly the same question https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript — Tamás Varga, May 10 '18 at 09:54

score 12 · Accepted Answer · answered May 10 '18 at 09:44

12

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

answered May 10 '18 at 09:44

Ted

3,985
1
20
33

2

This approach does not remove the event handlers of the removed child nodes, potentially leading to memory leak. – danefondo Feb 07 '22 at 06:08
@danefondo could you kindly expand? I understand the first part of your comment but I don't know enough to understand how that could create a memory leak thank you. – Neil Feb 22 '22 at 11:28

score 3 · Answer 2 · edited Mar 29 '22 at 05:21

3

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

edited Mar 29 '22 at 05:21

Nathan

73,987
14
40
69

answered Aug 05 '20 at 20:47

Fernando

39
1

You have an extra closing paren. Should be box.removeChild(box.lastChild); – Maximus Nerdous Jun 19 '21 at 14:26
hasChildElements? Maybe you mean "hasChildNodes" (https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes) – mjaque Aug 26 '22 at 16:37

score 0 · Answer 3 · answered Sep 06 '20 at 15:27

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.

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

How to delete all Child Elements from a div element using JS

3 Answers3