使用JavaScript永久删除dom元素 - 极悦
首页 课程 师资 教程 报名

使用JavaScript永久删除dom元素

  • 2022-08-18 10:33:33
  • 1317次 极悦

99% 的时间,要对用户隐藏/删除元素,您可以使用display:none;. 有一个用例,需要从 DOM 中永久删除元素。有没有使用 JavaScript 从 DOM 中删除元素的解决方案?

答案是肯定的!您可以使用 node.removeChild() JavaScript 实用函数从 DOM 中永久删除元素。

node.removeChild让我们通过一个代码示例来了解如何使用。

解决方案

假设您有一个列表。

<ul>
  <li id="1">Whiskey</li>
  <li id="2">Carmella</li>
  <li id="3">Fluffy</li>
</ul>

假设我想将 Carmella 从列表中删除。这是在 JavaScript 中如何完成的:

// Step 1: Select element you desire to remove
const carmella = document.querySelector('#2');
// Step 2: Check if she exist in the list
if (carmella) {
  // Remove from element permanently from the DOM
  // Step 3: Reference back to the parent element and execute removeChild()
  // Step 4: Pass in element you desire to remove
  carmella.parentElement.removeChild(carmella);
}

通过使用node.removeChild(),您将从 DOM 中永久删除一个元素。超级简单!

选你想看

你适合学Java吗?4大专业测评方法

代码逻辑 吸收能力 技术学习能力 综合素质

先测评确定适合在学习

在线申请免费测试名额
价值1998元实验班免费学
姓名
手机
提交