如何從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();
});