//
// 首先，获取父节点和子节点
var parent = document.getElementById('parent');
var child = document.getElementById('child');
// 使用removeChild方法删除子节点
parent.removeChild(child);
```
在这个例子中，我们首先通过`getElementById`方法获取了父元素`#parent`和子元素`#child`的引用。然后，我们调用父元素的`removeChild()`方法，并将子元素作为参数传入，从而实现了从父元素中移除子元素的目的。
### 二、更安全的删除操作
在实际开发中，直接调用`removeChild()`可能会因为元素不存在或已经被移除而导致错误。为了避免这种情况，我们可以先检查元素是否存在，再进行删除操作：
```javascript
var parent = document.getElementById('parent');
var child = document.getElementById('child');
if (child && parent.contains(child)) {
parent.removeChild(child);
} else {
console.log('元素不存在或已被删除');
}
```
通过`contains()`方法检查子元素是否仍然是父元素的子节点，可以确保在尝试删除之前元素确实存在且未被移除。
### 三、使用`remove()`简化操作
在较新的浏览器版本中，你可以直接使用元素的`remove()`方法来从DOM中移除该元素，而无需关心它的父元素是谁。这个方法比`removeChild()`更加简洁直观：
```javascript
var child = document.getElementById('child');
if (child) {
child.remove();
}
```
`remove()`方法会自动处理从DOM中移除元素的逻辑，无需你手动指定父元素。这使得代码更加简洁且易于维护。
### 四、动态列表的删除操作
在处理动态列表（如用户评论、商品列表等）时，删除操作可能会更加复杂。你可能需要根据用户的交互（如点击删除按钮）来删除列表中的特定项。这时，可以通过事件监听和动态查找要删除的元素来实现：
```html
这是一个要删除的子元素
//- 项目1
- 项目2