JavaScript/刪除元素

更改元素

更改元素樣式

更改元素

更改元素樣式

HTML 頁面和 DOM 物件是分層結構的。每個元素和屬性都屬於唯一一個父元素。要刪除元素或屬性，首先必須找到父元素。刪除操作可以在此物件上執行。

刪除元素

使用removeChild函式刪除元素。要從以下示例中的<div>元素中刪除<p>元素

<div id="parent">
  <p id="child">I'm a child!</p>
</div>

JavaScript 程式碼是...

// get elements
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// delete child
parent.removeChild(child);

... 並且剩餘的 HTML 結構將是

<div id="parent"></div>

子元素的子元素

如果刪除了一個元素，則其所有子元素也將被刪除。透過這種方式，如果多個元素具有共同的根，則可以使用一個命令刪除 DOM 的很大一部分。例如，刪除一個完整的列表

<div id="div_1">
  <ul id="listOfNames">
    <li>Albert</li>
    <li>Betty</li>
    <li>Charles</li>
  </ul>
</div>

JavaScript 程式碼片段刪除了<ul>元素以及所有<li>元素。

const parent = document.getElementById("div_1");
const child = document.getElementById("listOfNames");
parent.removeChild(child);

parentNode

要刪除元素，需要知道其父元素。如果只能定位子元素，但由於某些原因無法定位父元素，則子元素的屬性parentNode將為你指明方向。

// get the child element
const child = document.getElementById("child");

// retrieve the parent
const parent = child.parentNode; // no parenthesis ()

// remove the child element from the document
parent.removeChild(child);

刪除屬性

使用removeAttribute函式刪除屬性。要從以下示例中的<a>元素中刪除href屬性

<a id="anchor" href="https://wikibook.tw">Wikibook</a>

JavaScript 程式碼是

// get element
const anchor = document.getElementById("anchor");
// remove attribute
anchor.removeAttribute("href");

元素本身（包括連結文字）仍然存在，但你無法再進行導航。

參見