JS中如何刪除某個父元素下的所有子元素?這里我介紹幾種方法:
1.通過元素的 innerHTML 屬性來刪除
這種方式我覺得是最有方便的,直接找到你想要的父元素,直接令其 element.innerHTML = "";
舉例說明:
<input type="button" value="按鈕" id="btn"> <div id="dv"> <p>1</p> <p>2</p> <p>3</p> </div> <script> document.getElementById("btn").onclick = function () { document.getElementById("dv").innerHTML = ""; } </script>
2.通過 removeChild() 方法來刪除
removeChild() 的用法是先找到父級元素parent,然后調用 parent.removeChild(thisNode) 來刪除當前子節點(thisNode),那我們只要循環遍歷刪除所有的即可。
舉例說明:
<input type="button" value="按鈕" id="btn"> <div id="dv"> <p>1</p> <p>2</p> <p>3</p> </div> <script> document.getElementById("btn").onclick = function () { // 獲取 div 標簽 var div = document.getElementById("dv"); // 獲取 div 標簽下的所有子節點 var pObjs = div.childNodes; for (var i = pObjs.length - 1; i >= 0; i--) { // 一定要倒序,正序是刪不干凈的,可自行嘗試 div.removeChild(pObjs[i]); } } </script>
注意:循環遍歷的時候一定要倒序,因為正序的時候,當你把索引為0的子節點刪除后,那么原來索引為1的就變成了0,而這時變量 i 已經變成1了,程序繼續走時就會刪除原先索引為2的現在為1的節點,結果就是最后只刪除了一半的節點,朋友們可自行嘗試理解一下。
3.通過 jQuery 中 empty() 方法來刪除
語法:
$(selector).empty()
舉例說明:
<input type="button" value="按鈕" id="btn"> <div id="dv"> <p>1</p> <p>2</p> <p>3</p> </div> <script src="jquery-3.4.1.js"></script> <script> $("#btn").click(function () { $("#dv").empty(); }) </script>