remove() 和 detach() 方法的区别

在看jQuery这两种方法的区别之前，我们先来了解一下方法。

remove() ：这个remove()方法从 DOM 中删除匹配的元素。当我们将remove()方法应用于任何元素时，该元素内的所有内容和元素本身都将从 DOM 中删除。 所有嵌套元素、事件处理程序或该元素中存在的任何类型的数据都将被删除。

句法：

$('selector').remove();

例子：

HTML

  

    
    
    

  

    
        Hello Geeks!
  
        Hey Hello
  
    
  
    Click here to remove above element
    
        // Removing class test from DOM
        $("button").click(function () {
            $(".test").remove();
        })        
    

  

输出：

移除方法

分离（）： detach()方法与上面的remove()方法几乎相同。唯一的区别是detach()方法保留与该删除元素关联的所有数据。而且我们所有的数据都是安全的，所以我们可以随时将它们重新插入到 DOM 中。

当我们想要删除任何元素但我们不想完全删除它以便我们可以稍后重新插入删除的元素时，基本上会使用此方法。

句法：

$(selector).detach()

示例：我们将首先从 DOM 中删除一个元素，然后，我们将尝试将该删除的元素重新插入到 DOM 中。

HTML

  

    
    
   

  

    GeeksforGeeks
  
    Detach h3 tag
    Attach to DOM
    
        // A variable to store the data 
        // of removed element
        let rem; 
  
        // Removing h3 tag first
        // on clicking detach button
        $("#detach").click(function () {
            rem = $("h2").detach();
        })
  
        // Reinserting h2 tag 
        // on clicking attach button
        $("#attach").click(function(){
            rem.appendTo("body");
        })
  
    

  

输出：

分离和连接

.remove() 和 .detach() 的区别：

remove()	detach()
It removes the matched element from the DOM.	It also removes the matched element from the DOM.
It does not keep the data of the removed elements. Like, all child elements, event handlers, and any type of data present inside the element will be removed.	It keeps the data of the detached elements. Everything present inside the detached element is kept safe.
It is not possible to reinsert the removed element back into the DOM.	We can easily reinsert elements into the DOM whenever we want.