如何使用jQuery移除HTML内容，并在内部元素含指定类时移除容器？

没问题，我来帮你一步步实现这个功能！首先咱们先明确一下典型的HTML结构，方便后续代码演示：

<div class="people-list">
  <!-- 好友人员容器：Add按钮隐藏 -->
  <div class="person-container">
    <span class="person-name">好友张三</span>
    <button class="btn-add-friend hidden-element">Add Friend</button>
    <button class="btn-remove-friend">Remove Friend</button>
  </div>

  <!-- 非好友人员容器：Remove按钮隐藏 -->
  <div class="person-container">
    <span class="person-name">非好友李四</span>
    <button class="btn-add-friend">Add Friend</button>
    <button class="btn-remove-friend hidden-element">Remove Friend</button>
  </div>
</div>

先给隐藏按钮加个基础的CSS样式，确保hidden-element类能生效：

.hidden-element {
  display: none;
}

接下来分两种常见场景实现需求：

场景1：点击按钮时移除对应按钮，并自动清理容器 #

比如点击「Remove Friend」后，先删掉这个按钮，然后检查当前人员容器里是否还有隐藏元素（此时剩下的Add按钮是隐藏状态），如果有的话就直接删掉整个人员容器；同理处理「Add Friend」按钮的点击事件。

对应的jQuery代码如下：

// 绑定移除好友按钮的点击事件
$('.btn-remove-friend').on('click', function() {
  const $currentBtn = $(this);
  // 找到当前按钮所属的人员容器
  const $personContainer = $currentBtn.closest('.person-container');

  // 第一步：移除当前点击的按钮（也就是你说的"指定HTML内容"）
  $currentBtn.remove();

  // 第二步：检查容器内是否存在hidden-element类的元素
  if ($personContainer.find('.hidden-element').length > 0) {
    // 满足条件，移除整个人员容器
    $personContainer.remove();
  }
});

// 绑定添加好友按钮的点击事件
$('.btn-add-friend').on('click', function() {
  const $currentBtn = $(this);
  const $personContainer = $currentBtn.closest('.person-container');

  $currentBtn.remove();

  if ($personContainer.find('.hidden-element').length > 0) {
    $personContainer.remove();
  }
});

场景2：批量移除指定内容，并清理符合条件的容器 #

如果是需要批量操作（比如移除所有特定名称的人员信息），可以用下面的写法：

// 示例：移除所有名为"张三"的人员名称元素，随后清理容器
$('.person-name:contains("张三")').each(function() {
  const $nameElement = $(this);
  const $personContainer = $nameElement.closest('.person-container');

  // 移除指定的HTML内容（这里是人员名称）
  $nameElement.remove();

  // 检查容器内是否有隐藏元素，有则删除容器
  if ($personContainer.find('.hidden-element').length > 0) {
    $personContainer.remove();
  }
});

关键代码小解析 #

• $(element).closest('.person-container')：通过当前操作的元素向上查找最近的人员容器，确保我们只操作当前人员的容器，不会影响其他列表项。
• $element.remove()：jQuery内置的移除元素方法，直接删除指定的HTML内容。
• $container.find('.hidden-element').length > 0：判断容器内是否存在隐藏元素，长度大于0就说明存在，此时移除整个容器。

内容的提问来源于stack exchange，提问作者Patrick