Различия между detach (), hide () и remove () - jQuery

Ответы:

151

hide()устанавливает displayсвойство CSS согласованных элементов равным none.

remove() полностью удаляет совпадающие элементы из модели DOM.

detach()похоже remove(), но сохраняет сохраненные данные и события, связанные с согласованными элементами.

Чтобы повторно вставить отсоединенный элемент в DOM, просто вставьте возвращенный jQueryнабор из detach():

var span = $('span').detach();

...

span.appendTo('body');
Яков Релкин
источник
7
В сочетании с .clone (true) вы можете использовать detach для дешевого создания шаблонов, позволяющего избежать прямых событий jquery: jsfiddle.net/b9chris/PNd2t
Chris Moschini
Я до сих пор не вижу разницы. Если я использую removeвместо detach, пример все еще работает.
comecme
12
@comecme: если вы связали событие, такое как обработчик кликов, с диапазоном, вызовите remove()и снова присоедините его, привязка исчезнет, ​​и щелчок по диапазону ничего не сделает. При вызове detach()и повторном подключении привязка остается, а обработчик кликов продолжает работать.
lambshaanxy 07
Ответ @Kumar немного более верен в отношении remove (), поскольку он не удаляется из DOM. Это имеет последствия, поскольку сложные элементы со связанными событиями, как правило, съедают много памяти браузера, если сборщик мусора недостаточно быстро их использует. Уловка для более быстрого освобождения памяти: $ (element) .html (''). Remove ();
oskarth
hide () устанавливает для свойства отображения CSS согласованных элементов значение none. Это означает: Можете ли вы описать мне разницу между hide () и display: none.
Криш
50

Представьте себе лист бумаги на столе, на котором карандашом написаны заметки.

  • hide -> накинуть на него одежду
  • empty -> удалить заметки ластиком
  • detach -> возьмите бумагу в руку и держите ее там для любых будущих планов
  • remove -> возьмите бумагу и выбросьте ее в мусорную корзину

Бумага представляет элемент, а примечания представляют содержимое (дочерние узлы) элемента.

Немного упрощено и не совсем точно, но понятно.

Золтан Тамаши
источник
14

hide() устанавливает для отображения совпадающего элемента значение none.

detach() удаляет совпадающие элементы, включая весь текст и дочерние узлы.

Этот метод хранит все данные, связанные с элементом, и поэтому может использоваться для восстановления данных элемента, а также обработчиков событий.

remove() также удаляет совпавшие элементы, включая весь текст и дочерние узлы.

Однако в этом случае можно восстановить только данные элемента, а не его обработчики событий.

Кумар
источник
11

В jQuery есть три метода удаления элементов из DOM. Эти три метода .empty(), .remove()и .detach(). Все эти методы используются для удаления элементов из DOM, но все они разные.

.скрывать()

Скройте совпадающие элементы. Без параметров метод .hide () - это самый простой способ скрыть элемент HTML:

$(".box").hide();

.empty ()

Метод .empty () удаляет все дочерние узлы и содержимое выбранных элементов. Этот метод не удаляет сам элемент или его атрибуты.

Заметка

Метод .empty () не принимает никаких аргументов, чтобы избежать утечки памяти. jQuery удаляет другие конструкции, такие как обработчики данных и событий, из дочерних элементов перед удалением самих элементов.

пример 

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").empty();
</script>

Это приведет к созданию структуры DOM с удаленным текстом Hai:

<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>

Если бы внутри <div class="hai">у нас было какое-то количество вложенных элементов , они бы тоже были удалены.

.удалять()

Метод .remove () удаляет выбранные элементы, включая весь текст и дочерние узлы. Этот метод также удаляет данные и события выбранных элементов.

Заметка

Используйте .remove (), когда хотите удалить сам элемент, а также все, что внутри него. В дополнение к этому удаляются все связанные события и данные jQuery, связанные с элементами.

ПРИМЕР

Рассмотрим следующий HTML-код:

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").remove();
</script>

Это приведет к созданию структуры DOM с <div>удаленным элементом:

<div class="content">
<div class="goodevening">good evening</div>
</div

Если бы внутри <div class="hai">у нас было какое-то количество вложенных элементов , они бы тоже были удалены. Другие конструкции jQuery, такие как обработчики данных или событий, также удаляются.

.detach ()

Метод .detach () удаляет выбранные элементы, включая весь текст и дочерние узлы. Однако он хранит данные и события. Этот метод также сохраняет копии удаленных элементов, что позволяет их повторно вставить позже.

Заметка

Метод .detach () полезен, когда удаленные элементы должны быть повторно вставлены в DOM позже.

пример

<!doctype html>
<html>
<head>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hai!</p>Good <p>Afternoo</p>
<button>Attach/detach paragraphs</button>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
</script>
</body>
</html>

Для получения дополнительной информации посетите: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html.

Джейсон
источник
0 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
            var $span;
            $span = $("<span>");
            $span.text("Ngoc Xuan");
            function addEvent() {
                $span.on("click",function(){
                    alert("I'm Span");
                });
            }
            function addSpan() {

                $span.appendTo("body");
            }
           function addButton(name) {
               var $btn = $("<input>");
               $btn.attr({value:name,
                       type:'submit'});
               if(name=="remove"){
                   $btn.on("click",function(){
                       $("body").find("span").remove();
                   })
               }else if(name=="detach"){
                   $btn.on("click",function(){
                       $("body").find("span").detach();
                   })
               }else if(name=="Add") {
                   $btn.on("click",function(){
                       addSpan();
                   })
               }else if(name=="Event"){
                   $btn.on("click",function(){
                       addEvent();
                   })
               }else if (name == "Hide") {
                   $btn.on("click",function(){
                       if($span.text()!= '')
                           $span.hide();
                   })
               }else {
                   $btn.on("click",function(){
                       $span.show();
                   })
               }
               $btn.appendTo("body");
           }
            (function () {
                addButton("remove");
                addButton("detach");
                addButton("Add");
                addButton("Event");
                addButton("Hide");
                addButton("Show");
            })();
        });
    </script>
</body>
</html>
Сюан Нгуен
источник