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://wikibooks.cn">Wikibook</a>

JavaScript 代码是

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

元素本身（包括链接文本）仍然存在，但你无法再进行导航。

参见