Manipulation-DOM Removal

Posted on Edited on In Views: Disqus:

 

一、.detach()

將指定的元素拿掉，但所有關於該元素的 jQuery data 或 event handler 皆會保留。

If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use .detach() instead.

 

二、.remove()

對於指定的元素，除了將其底下的子元素拿掉，也會將元素本身拿掉。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul id="book">
        <li>book1</li>
        <li>book2</li>
        <li>book3</li>
    </ul>
    <ul id="friut">
        <li>friut1</li>
        <li>friut2</li>
        <li>friut3</li>
    </ul>
    <script>
        $("#book").remove();
    </script>
</body>

</html>

執行結果為

 

三、.empty()

對於指定的元素，將其底下的子元素拿掉，但不會將元素本身拿掉。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <ul id="book">
        <li>book1</li>
        <li>book2</li>
        <li>book3</li>
    </ul>
    <ul id="friut">
        <li>friut1</li>
        <li>friut2</li>
        <li>friut3</li>
    </ul>
    <script>
        $("#friut").empty();
    </script>
</body>

</html>

執行結果為

 

四、.unwrap()

請參考Manipulation-DOM Insertion, Around第一項