使用JavaScript永久删除dom元素

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 中永久删除一个元素。超级简单!