### JS与jQuery获取父元素及删除子元素的不同方法
#### 一、概述
在Web开发过程中，经常需要处理DOM（Document Object Model）的操作，包括获取元素、修改元素属性以及删除元素等。本文将详细介绍如何使用JavaScript（简称JS）和jQuery这两种流行的技术来获取指定元素的父元素，并删除这些父元素中的子元素。我们将通过具体的代码示例来阐述两种方法的异同，并分析它们在实际应用中的优缺点。
#### 二、获取父元素的方法
##### 1. 使用JS获取父元素
在原生JS中，可以通过`element.parentNode`来获取指定元素的父元素。例如，如果要获取ID为`"id"`的元素的父元素，可以这样操作：
```javascript
var obj = document.getElementById("id");
var parent = obj.parentNode;
```
这里，`document.getElementById("id")`用于获取ID为`"id"`的DOM元素，而`obj.parentNode`则返回该元素的父节点。
##### 2. 使用jQuery获取父元素
jQuery提供了一种更加简洁的方式来获取父元素，只需调用`.parent()`方法即可：
```javascript
var obj = $("#id");
var parent = obj.parent();
```
其中，`$("#id")`用于获取ID为`"id"`的元素，而`obj.parent()`则返回该元素的父元素。
#### 三、删除子元素的方法
##### 1. 使用JS删除子元素
在原生JS中，可以使用`Node.removeChild()`方法来删除某个元素的子元素。例如，要删除`obj`元素，可以这样做：
```javascript
var parent = obj.parentNode;
parent.removeChild(obj);
```
这里，`parent.removeChild(obj)`会将`obj`从其父元素中移除。
##### 2. 使用jQuery删除子元素
在jQuery中，有多种方法可以删除子元素，但最常用的是`.empty()`方法，它可以清空指定元素的所有子元素：
```javascript
var parent = $("#id").parent();
parent.empty();
```
或者，如果要删除特定的子元素，可以使用`.remove()`方法：
```javascript
$("#id").remove();
```
这行代码将会从DOM树中完全移除ID为`"id"`的元素及其所有子元素。
#### 四、遍历元素
在处理DOM时，经常需要遍历元素集合。下面分别介绍使用JS和jQuery进行遍历的方法：
##### 1. 使用JS遍历元素
当需要遍历一系列DOM元素时，可以使用普通的`for`循环：
```javascript
var elements = document.getElementsByClassName("className");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
// 对element进行操作
}
```
##### 2. 使用jQuery遍历元素
jQuery提供了一个强大的`.each()`方法来遍历元素集合：
```javascript
$(".className").each(function(index, element) {
// 对element进行操作
});
```
这里的`function(index, element)`会在每次迭代时被调用，`index`表示当前元素的索引，`element`则是当前元素的DOM对象。
#### 五、总结
通过以上介绍，我们可以看到JS和jQuery在处理DOM操作方面各有优势。原生JS提供了更多底层的控制能力，而jQuery则简化了语法，使得DOM操作更加简便。在实际开发中，应根据具体需求和个人偏好选择合适的方法。同时，了解两种方法的工作原理有助于编写更高效、可维护的代码。
