jQuery empty () vs delete ()

99

У чому різниця між методами empty()та remove()методами jQuery, і коли ми викликаємо будь-який із цих методів, об’єкти, що створюються, будуть зруйновані та звільнена пам'ять?

javascript jquery dom-manipulation

— мабузер
джерело

160

empty() випорожнить вибір її вмісту, але збереже сам вибір.
remove()очистить його вміст і видалить сам вибір.

Поміркуйте:

<div>
    <p><strong>foo</strong></p>
</div>

$('p').empty();  // --> "<div><p></p></div>"

// whereas,
$('p').remove(); // --> "<div></div>"

Вони обидва видаляють об'єкти DOM і повинні звільнити пам'ять, яку вони займають, так.

Ось посилання на документацію, яка також містить приклади:

— нікф
джерело

1

Що з обробниками подій? У мене є дивний випадок, коли порожній + додавання двічі, з різними додатками спричиняє другий набір доданих елементів для виконання обробників першого набору.

— Кіллрой

1

@ занадто пізно, але вони також видаляють обробник. є ймовірність, що у вас були зареєстровані ці обробники з функцією на зразок liveабо delegate.

— скасовано

55

Документація це дуже добре пояснює. Він також містить приклади:

перед:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

.remove ():

$('.hello').remove();

після:

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

перед:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

.empty ():

$('.hello').empty();

після:

<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

Що стосується пам'яті, щойно елемент буде видалено з DOM і більше не буде посилань на нього, збирач сміття поверне пам'ять під час його запуску.

— Дарин Димитров
джерело

порожній не торкнеться атрибутів селектора. Якщо ви хочете видалити атрибути елемента селектора, я помітив, що jQuery removeAttr та deleteClass є помилкою у firefox. Тож у мене була можливість скористатися методом видалення і знову додати елемент контейнера, а потім додати до цього дочірні вузли.

— randomin substanceOfLivingThing

Ідеальний підсумок, це так добре пояснює! Для мене навіть краще, ніж прийнята відповідь.

— JonSnow

2

$("body").empty() - це "видаляє елементи HTML DOM всередині тегу body -

коли ви заявляєте $("body").remove() - він видаляє весь HTML DOM разом із тілом TAG.

— user1452840
джерело

17

Що дає ця відповідь, якої не вистачає в існуючих відповідях, які були тут уже три роки?

— jcsanyi