如何使用jQuery从匹配的元素集合中移除符合指定选择器的元素

当我们需要从匹配的元素集合中移除符合指定选择器的元素时，我们可以使用jQuery的not()方法来实现。下面是一个详细的攻略，包含两个示例说明。

步骤

选择要移除的元素

首先，我们需要选择要从元素集合中移除的元素。我们可以使用jQuery的选择器来选择这些元素。以下是一个示例：

var elementsToRemove = $(".remove-me");

在上述示例中，我们使用.remove-me选择器来选择要移除的元素，并将它们存储在一个变量中。

移除元素

在JavaScript文件中，我们可以使用jQuery的not()方法来移除符合指定选择器的元素。以下是一个示例：

var elementsToRemove = $(".remove-me");

var remainingElements = $("li").not(elementsToRemove);

console.log(remainingElements);

在上述示例中，我们使用not()方法来移除符合.remove-me选择器的元素。我们使用$("li")选择器来选择所有<li>元素，并将它们存储在一个变量中。我们将要移除的元素传递给not()方法，并将返回的元素集合存储在另一个变量中。我们使用console.log()方法来输出剩余元素。

示例

示例1：从元素集合中移除指定的元素

在这个示例中，我们将从元素集合中移除指定的元素。以下是完整的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery App</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      var elementsToRemove = $(".remove-me");

      var remainingElements = $("li").not(elementsToRemove);

      console.log(remainingElements);
    });
  </script>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li class="remove-me">Item 2</li>
    <li>Item 3</li>
    <li class="remove-me">Item 4</li>
    <li>Item 5</li>
  </ul>
</body>
</html>

在上述示例中，我们使用.remove-me选择器来选择要移除的元素，并将它们存储在一个变量中。我们使用$("li")选择器来选择所有<li>元素，并将它们存储在变量中。我们将要移除的元素传递给not()方法，并将返回的元素集合存储在另一个变量中。我们使用console.log()方法来输出剩余的元素。

示例2：从表格中移除指定的行

在这个示例中，我们将从表格中移除指定的行。以下是完整的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery App</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      var rowsToRemove = $("tr:contains('John')");

      var remainingRows = $("table tr").not(rowsToRemove);

      console.log(remainingRows);
    });
  </script>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Bob Johnson</td>
      <td>40</td>
    </tr>
    <tr>
      <td>John Smith</td>
      <td>35</td>
    </tr>
  </table>
</body>
</html>

在上述示例中，我们使用$("tr:contains('John')")选择器来选择包含“John”文本的行，并将它们存储在一个变量中。我们使用$("table tr")选择器来选择所有表格行，并将它们存储在变量中。我们将要移除的行传递给not()方法，并返回的元素集合存储在另一个变量中。我们使用console.log()方法来输出剩余的行。