Відповіді:
hide()встановлює значення displayвластивості CSS відповідних елементів none.
remove() видаляє відповідні елементи з DOM повністю.
detach()схоже remove(), але зберігає збережені дані та події, пов’язані з відповідними елементами.
Щоб знову вставити відокремлений елемент у DOM, просто вставте повернений jQueryнабір із detach():
var span = $('span').detach();
...
span.appendTo('body');
removeзамість цього detach, приклад все одно працює.
remove()та приєднайте її знову, прив’язка буде відсутня, а натискання на проміжок нічого не призведе. Якщо ви зателефонували detach()і повторно встановите зв'язок, прив'язка залишається і обробник кліків продовжує працювати.
Уявіть на столі аркуш паперу з деякими записками, написаними олівцем.
hide -> накиньте на нього одягempty -> видаліть замітки гумкоюdetach -> візьміть папір в руку і потримайте її там, де б не було планів на майбутнєremove -> візьміть папір і киньте його на смітникПапір представляє елемент, а примітки - вміст (дочірні вузли) елемента.
Трохи спрощений і не зовсім точний, але легкий для розуміння.
hide() встановлює режим відображення відповідного елемента.
detach() видаляє відповідні елементи, включаючи всі текстові та дочірні вузли.
Цей метод зберігає всі дані, пов'язані з елементом, і тому їх можна використовувати для відновлення даних елемента, а також обробників подій.
remove() також видаляє відповідні елементи, включаючи всі текстові та дочірні вузли.
Однак у цьому випадку можна відновити лише дані елемента, а не його обробники подій не можуть.
У jQuery є три методи видалення елементів з DOM. Ці три методи .empty(), .remove()і .detach(). Усі ці методи використовуються для видалення елементів з DOM, але всі вони різні.
.hide ()
Сховати відповідні елементи. Без параметрів метод .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 () видаляє вибрані елементи, включаючи всі текстові та дочірні вузли. Цей метод також видаляє дані та події вибраних елементів.
Примітка
Використовуйте .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
<!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>
detachподивіться на stackoverflow.com/questions/12058896/…