JavaScript编程

删除 HTML 元素和属性

HTML 页面和 DOM 对象是层级结构的。每个元素和属性都有且仅有一个父元素。要删除元素或属性，首先必须定位到父元素，然后可以对该对象执行删除操作。

删除元素

元素通过 removeChild 方法来删除。以下示例展示了如何从 <div> 元素中删除 <p> 元素：

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

对应的 JavaScript 代码如下：

// 获取元素
const parent = document.getElementById("parent");
const child = document.getElementById("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 属性来获取父元素。

// 获取子元素
const child = document.getElementById("child");

// 获取父元素
const parent = child.parentNode; // 不需要括号

// 从文档中删除子元素
parent.removeChild(child);

删除属性

属性通过 removeAttribute 方法来删除。以下示例展示了如何从 <a> 元素中删除 href 属性：

<a id="anchor" href="https://en.wikibooks.org">Wikibook</a>

相应的 JavaScript 代码是：

// 获取元素
const anchor = document.getElementById("anchor");
// 删除属性
anchor.removeAttribute("href");

尽管元素本身（包括链接的文本）仍然存在，但链接已经无法再被点击和导航。

参考资料

• MDN Remove Child
• MDN Remove Attribute