How to remove child element from div

Question

I am getting error some this like this.

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

my div is some what like this.

<div class="" style="" id ="P1">
 <div class= " " style="" id ="C1">
 <Input>Val</Input>
 </div>
 <div class= " child2" style="" id ="C2">
 <Input>Val2</Input>
 </div>
</div>

I want to remove all the child but getting the error.

var myClass = val.("Data").el.dom // My Parent div
 myClass.removeChild();

Here is what I am trying. Can anybody help me how to get this.

• David: In dom element. Wanted to remove from dom.
• David: Data is id of my component.
• Niklesh Raut: are you using jquery ? in which event you want to remove all child div ?

Answer 1

To remove all the child of div with id P1 you may simply do this :

document.querySelector("#P1").innerHTML = "";
//or use this 
//document.getElementById("P1").innerHTML = "";
//or a jQuery solution like this
// $('#P1').html("");

<div class="" style="" id="P1">
 <div class=" child1" style="" id="C1">
 <Input>Val</Input>
 </div>
 <div class=" child2" style="" id="C2">
 <Input>Val2</Input>
 </div>
</div>

• David: I am only able to access id not class

Answer 2

removeChild method removes a specific child node.If need to remove all the child ,put it in a while loop

firstChild returns the first nested element. On successful removal, the next child will be the first child,so as long as firstChild is there, it will execute

var prtElement = document.getElementById('P1');
while (prtElement.firstChild) {
 prtElement.removeChild(prtElement.firstChild);
}

<div class="Parent" style="" id="P1">
 <div class=" child1" style="" id="C1">
 <Input>Val</Input>
 </div>
 <div class=" child2" style="" id="C2">
 <Input>Val2</Input>
 </div>
</div>

Answer 3

I would recommend using jQuery:

$(document).ready(function(){
/* or whatever else function you want */
$("#parent").children().remove();
});