JavaScript如何刪除子元素

在編寫JavaScript代碼時，操作DOM元素的能力是必不可少的。其中刪除元素的功能在實際開發中也不可或缺。接下來，我們將詳細講解如何使用JavaScript刪除子元素。

通過父元素刪除子元素

在JavaScript中，我們可以通過父元素刪除子元素。首先，我們需要獲取到父元素和子元素的引用。

const parent = document.getElementById('parent');
const child = document.getElementById('child');

接下來，我們可以使用父元素的removeChild()方法來刪除子元素。

parent.removeChild(child);

實例：

<div id="parent"><p id="child">我是子元素</p></div><button onclick="removeChild()">刪除子元素</button><script>function removeChild() {
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);
}
</script>

通過子元素刪除自身

除了通過父元素刪除子元素外，我們也可以通過子元素刪除自身。只需獲取到被點擊的元素，然后使用remove()方法即可。

const element = document.getElementById('element');
element.remove();

實例：

<p id="element">我將被刪除！</p><button onclick="removeElement()">刪除元素</button><script>function removeElement() {
const element = document.getElementById('element');
element.remove();
}
</script>

刪除所有子元素

有時候我們需要刪除元素的所有子元素。這時候，我們可以通過遍歷子元素并使用remove()方法來刪除每個子元素。

const parent = document.getElementById('parent');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}

實例：

<div id="parent"><p>子元素1</p><p>子元素2</p><p>子元素3</p></div><button onclick="removeChildren()">刪除所有子元素</button><script>function removeChildren() {
const parent = document.getElementById('parent');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
</script>

總結

在JavaScript中刪除子元素的操作非常簡單。我們可以通過父元素刪除子元素，也可以通過子元素刪除自身。最后，如果需要刪除元素的所有子元素，我們可以使用循環遍歷子元素并刪除每個子元素。