如何用jQuery删除父元素，而不是其子元素

想要用jQuery删除父元素，需要使用到jQuery的父元素选择器和删除方法。具体步骤如下：

1. 使用父元素选择器定位到要删除的父元素。父元素选择器使用 parent() 方法来定位，如下所示：

   javascript
$('#child').parent()

   上面的例子中，我们使用了ID选择器 #child 定位到一个子元素，然后使用 parent() 方法找到了其父元素。

2. 调用jQuery的删除方法 remove() 来删除父元素。如下所示：

   javascript
$('#child').parent().remove();

   运行上述代码后，父元素和其所有子元素都会被删除。

示例1：

HTML代码：

<div class="item">
  <h2>商品标题</h2>
  <img src="picture.png" alt="商品图片">
  <button class="delete-btn">删除</button>
</div>

JavaScript代码：

$('.delete-btn').on('click', function() {
  $(this).parent().remove();
});

上述代码为一个简单的商品列表，每个商品有一个删除按钮。当点击删除按钮时，会删除当前商品，即删除其父元素 .item。

示例2：

HTML代码：

<ul>
  <li>第一项</li>
  <li>第二项<a href="#" class="delete-btn">删除</a></li>
  <li>第三项</li>
</ul>

JavaScript代码：

$('.delete-btn').on('click', function() {
  $(this).parent().parent().remove();
});

上述代码为一个简单的列表，每个列表项有一个删除按钮。当点击删除按钮时，会删除当前列表项，即删除其父元素 <li>，而不是其子元素 <a>。因此在代码中我们需要使用 parent() 方法两次来定位到要删除的父元素。