解释 jQuery 中 empty() remove() 和 detach() 方法的区别

如果你正在建造一些东西，并希望在点击、悬停或任何事件中移除一些HTML元素，那么你应该知道jQuery可以为我们轻松做到这一点。有三种jQuery方法可以帮助我们删除HTML元素，但有一些细微的差别。这些方法是。

remove() 方法。它从DOM中完全删除所选元素。它也删除了事件处理程序和与所选元素相关的数据。与被删除元素相关的数据可以被恢复，但事件处理程序不能被恢复。
detach()方法。它也会将选定的元素连同其所有的子元素一起删除，但被删除的元素的副本会被保留下来，以便在以后的时间里重新使用。
empty()方法。它从选定的元素中删除所有的子元素，但不删除选定元素本身。

让我们通过一个例子来理解这一点。

例子1：这个例子说明了remove()方法的使用。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
  
    <style>
        .container {
            background-color: yellow;
            width: 700px;
            height: 300px;
        }
  
        .child-block {
            background-color: red;
            width: 30%;
            height: 50%;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="child-block"></div>
    </div>
  
    <button class="remove">remove</button>
  
    <script>
         $(".remove").click(function () {$ (".container").remove();
        });
    </script>
</body>
  
</html>

输出::

解释 jQuery 中 empty() remove() 和 detach() 方法的区别

.remove()

你可以从上面的输出截图中看到，点击删除按钮后，黄色块和它的子块红色块都被删除。

例子2：这个例子说明了detach()方法的使用。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
    </script>
  
    <style>
        .container {
            background-color: yellow;
            width: 700px;
            height: 300px;
        }
  
        .child-block {
            background-color: red;
            width: 30%;
            height: 50%;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
          
        <div class="container">
            <div class="child-block"></div>
        </div>
  
        <div class="attach"></div>
  
        <button class="detach">
            remove
        </button>
  
        <button class="insert">
            Insert
        </button>
    </center>
  
    <script>
        let removed;
         $(".detach").click(function () { removed =$ (".container").detach();
        });
  
        $(".insert").click(function () {
            removed.appendTo(".attach");
        });
    </script>
</body>
  
</html>

输出:

解释 jQuery 中 empty() remove() 和 detach() 方法的区别

detach()

正如你所看到的，当我们第一次点击删除按钮时，它删除了容器元素和它的所有子元素，但由于detach()被使用，所有的事件处理程序和数据都存储在,their,removed变量中，因此我们在点击插入按钮时，又将所有被删除的元素追加到正文中。

例子3：这个例子说明了empty()方法的使用。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
  
    <style>
        .container {
            background-color: yellow;
            width: 700px;
            height: 300px;
        }
  
        .child-block {
            background-color: red;
            width: 30%;
            height: 50%;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
          
        <div class="container">
            <div class="child-block"></div>
        </div>
  
        <button class="empty">empty</button>
    </center>
  
    <script>
         $(".empty").click(function () {$ (".container").empty();
        });
    </script>
</body>
  
</html>

输出:

解释 jQuery 中 empty() remove() 和 detach() 方法的区别

empty()

正如你所看到的，点击空按钮会从容器div（它是一个父元素）中移除子div，因此红色块被移除。

empty()、remove()和detach()方法之间的区别：

remove()	detach()	empty()
它从DOM中移除匹配的元素和它的子元素。	它从DOM中删除匹配的元素和它的子元素。	它只删除匹配元素的子元素。
它还会删除匹配元素中的所有事件处理程序和数据等。	它保留了分离元素的数据，可以重复使用。	它删除了子元素的数据、事件处理程序等。匹配的元素和它的数据保持安全。
如果一个元素被移除，它就不能再被插入DOM中。	移除的元素可以很容易地再次插入到DOM中。	如果一个元素被清空了，它的子元素就不能再被插入了。