如何从div中删除子元素

Question

我得到这样的错误。

未捕获的TypeError：无法在“节点”上执行“ removeChild”：参数1的类型不是“节点”。

我的div是这样的。

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

我想删除所有孩子，但收到错误消息。

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

这是我正在尝试的。 有人可以帮我怎么做吗？

Answer 1

要删除ID为P1的div所有子代，您可以执行以下操作：

 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> 

Answer 2

removeChild方法删除一个特定的子节点。如果需要删除所有子节点，则将其放入while循环中

firstChild返回第一个嵌套元素。 成功删除后，下一个孩子将是第一个孩子，因此只要firstChild在此，它将执行

 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

我建议使用jQuery：

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