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

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

1. remove() 方法：它从 DOM 中完全删除选定的元素。它还删除与选定元素关联的事件处理程序和数据。可以恢复与已移除元素关联的数据，但无法恢复事件处理程序。
2. detach() 方法：它还删除所选元素及其所有子元素，但保留删除元素的副本以供以后重用。
3. empty() 方法：它从被选元素中移除所有子元素，但不移除被选元素本身。

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

示例 1：此示例说明了remove()方法的使用。

HTML

  

    
    
  
    
        .container {
            background-color: yellow;
            width: 700px;
            height: 300px;
        }
  
        .child-block {
            background-color: red;
            width: 30%;
            height: 50%;
        }
    

  

    
        
    
  
    remove
  
    
        $(".remove").click(function () {
            $(".container").remove();
        });
    

  

输出：：

。消除（）

从上面的输出屏幕截图中可以看出，单击删除按钮后，黄色块及其子红色块被删除。

示例 2：此示例说明了detach()方法的使用。

HTML

  

    
    
  
    
        .container {
            background-color: yellow;
            width: 700px;
            height: 300px;
        }
  
        .child-block {
            background-color: red;
            width: 30%;
            height: 50%;
        }
    

  

    
        
            GeeksforGeeks
        
          
        
            
        
  
        
  
        
            remove
        
  
        
            Insert
        
    
  
    
        let removed;
        $(".detach").click(function () {
            removed = $(".container").detach();
        });
  
        $(".insert").click(function () {
            removed.appendTo(".attach");
        });
    

  

输出：

分离（）

正如您所看到的，当我们第一次单击删除按钮时，它删除了容器元素及其所有子元素，但由于使用了 detach()，所有事件处理程序和数据都存储在它们的删除变量中，因此我们附加了所有删除单击插入按钮时再次在正文中添加元素。

示例 3：此示例说明了empty()方法的使用。

HTML

  

    
    
  
    
        .container {
            background-color: yellow;
            width: 700px;
            height: 300px;
        }
  
        .child-block {
            background-color: red;
            width: 30%;
            height: 50%;
        }
    

  

    
        
            GeeksforGeeks
        
          
        
            
        
  
        empty
    
  
    
        $(".empty").click(function () {
            $(".container").empty();
        });
    

  

输出：

空的（）

如您所见，单击空按钮会从容器 div（它是父元素）中删除子 div，因此红色块被删除。

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

remove()	detach()	empty()
It removes the matched element and its child elements from DOM.	It removes the matched elements and its child elements from DOM.	It removes only the child element of the matched element.
It also removes all event handlers, data etc. present inside the matched element	It keeps data of the detached element and can be reused.	It removed data, event handlers etc. of child elements. Matched element and its data remain safe.
If an element got removed It cannot be inserted again in the DOM.	The detached element can be inserted again inside DOM very easily.	If an element is emptied its child elements cannot be inserted again.