在前端开发中，有时候需要动态地删除HTML元素。JavaScript是一种常用的语言，可以轻松地实现这个功能。本文将介绍如何使用JavaScript删除HTML元素的详细步骤。
Step 1：获取要删除的元素
首先，我们需要使用JavaScript获取要删除的元素。可以通过以下方式获取：
const element = document.getElementById('myElement');上述代码使用getElementById()方法查找具有指定ID的元素，该方法根据ID属性返回一个对象。如果页面中没有具有该ID的元素，则返回null。
除了getElementById()方法外，还有其他获取元素的方法，如getElementsByTagName()和getElementsByClassName()方法。这些方法返回一个包含所有匹配元素的节点列表。
Step 2: 删除元素
有两种方法可以删除元素：
方法1：使用removeChild()方法
element.parentNode.removeChild(element);
上述代码使用removeChild()方法从DOM中删除指定的子节点。其中，parentNode属性返回指定元素的父节点。这意味着我们可以删除任何子节点，而不仅仅是直接父节点。
方法2：使用innerHTML属性
element.innerHTML = '';
上述代码将指定元素的innerHTML属性设置为空字符串。这将删除指定元素的所有子节点及其内容。但是，这种方法只适用于包含在元素中的所有内容都要删除的情况。
示例代码
下面是一个示例，展示了如何使用上述方法删除HTML元素：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
-------
------
---- -----------
-------------
------
------- -------------------------------------
--------
-------- --------------- -
----- ------- - ---------------------------------
----------------------------------------
-
---------
-------
-------在上面的示例中，单击“删除”按钮会调用deleteElement()函数，该函数使用removeChild()方法将包含段落的<div>元素从DOM中删除。
希望这篇文章能够帮助您学习如何使用JavaScript删除HTML元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11628