Change DIV children to display none

Question

HTML

    <div id="divID">
      <label></label>
      <textarea></textarea>
    </div>

JavaScript

function invisible(){
 let div = document.getElementById("divID");
 let children = div.childNodes;
   for (let i = 0; i < children.length; i++) {
      children[i].style.display = "none";
   }
 }

After calling the function nothing happens. What I'm doing wrong?

Answer 1

You have to set divID to your div tag.

    <div id="divID">
      <label></label>
      <textarea></textarea>
    </div>

And then you have to use div.children in invisible function.

 function invisible(){ let div = document.getElementById("divID"); let children = div.children; for (let i = 0; i < children.length; i++) { children[i].style.display = "none"; } }

 <input type="button" onClick=" invisible()" value="Remove" /> <div id="divID"> <label></label> <textarea></textarea> </div>

Answer 2

You can make the function more reusable by accepting the element whose children are to be hidden as the first argument. It currently only works for the element with id of "divID" .

 function invisible(parent){ for(const child of parent.children) child.style.display = 'none'; } invisible(document.querySelector('div'))

 <div> <label>Label</label> <textarea>Textarea</textarea> </div>

Answer 3

The problem seems to be your use of childNodes instead of children as other answers have pointed out.

This answer attempts to give some more context on what is happening in addition to the other answers.

let div = document.getElementById("divID");

console.log(div.childNodes)
// Returns something like
NodeList(5) [text, label, text, textarea, text]

console.log(div.children)
// Returns something like
HTMLCollection(2) [label, textarea]

So childNodes returns aNodeList and children returns anHTMLCollection .

The definition children on mdn explains the difference between children and childNodes :

Element.children includes only element nodes. To get all child nodes, including non-element nodes like text and comment nodes, use Node.childNodes.

The problem is that these text nodes don't have a style property. So it returns undefined . Trying to access the display property on style then causes a TypeError . Since the first element is a text element the loop fails immediately and the label and textarea are never hidden.

Answer 4

use children instead of childNodes :

 function invisible(){ let div = document.getElementById("divID"); let children = div.children; //<== children instead of childNodes for (let i = 0; i < children.length; i++) { children[i].style.display = "none"; } } //just to test after 1.5 sec all children of divID will be removed(display=none) setTimeout(invisible, 1500)

 <div id='divID'> <label>test1</label> <textarea>test2</textarea> </div>