jQuery unwrap() 方法

jQuery 中的 unwrap() 方法用於移除選中元素的父元素。換句話說，它會將選中元素從其父元素中“解包”。

此方法不會顯式返回任何值。它直接對選定的元素進行操作，如果它們的父元素與指定的篩選器匹配，則移除這些父元素。

語法

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

$(selector).unwrap()

引數

此方法不接受任何引數。

示例 1

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

<html>
<head>
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/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.jquery.com/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

列印頁面