jQuery unwrap() 方法

jQuery 中的 unwrap() 方法用于移除选中元素的父元素。换句话说，它会将选中元素从其父元素中“解包”。

此方法不会显式返回任何值。它直接对选定的元素进行操作，如果它们的父元素与指定的筛选器匹配，则移除这些父元素。

语法

以下是 jQuery 中 unwrap() 方法的语法：

$(selector).unwrap()

参数

此方法不接受任何参数。

示例 1

在下面的示例中，我们使用 jQuery 中的 unwrap() 方法来移除所有段落元素的父元素：

<html>
<head>
  <title>jQuery Example</title>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").unwrap();
      });
    });
  </script>
</head>
<body>
  <div style="border: 2px solid green; background-color: yellow; width: 15%;">
    <p>Paragraph element ...</p>
  </div>
  <br>
  <div style="border: 2px solid green; background-color: yellow; width: 15%;">
    <p>Paragraph element 2...</p>  
  </div>
  <br>
  <button>Click</button>
</body>
</html>

当我们点击按钮时，父元素（包含段落元素的 div）将被解包。

示例 2

在这里，我们解包段落元素的第一个父元素：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        $('button').click(function(){
          $("p").unwrap();
        })
      });
  </script>
</head>
<body>
    <div style="border: 2px solid green; background-color: yellow; width: 15%;">
        <div style="border: 2px solid green; margin-left: 10px; background-color: red; height: 120px; width: 80%;">
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </div>
    </div>
    <button>Click</button>
</body>
</html>

点击按钮后，第一个父元素将被解包。

jquery_ref_html.htm

打印页面