jQuery метод .empty()

Определение и применение

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

jQuery синтаксис:

JavaScript
$(selector).empty() // этот метод не принимает никаких параметров.

Добавлен в версии jQuery

1.0

Пример использования

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery метода .empty()</title>
    <style>
      p {
        border: 1px solid green; /* сплошная граница зеленого цвета размером 1 пиксель */
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("button").click(function () {
          // задаем функцию при нажатиии на элемент <button>
          $("p").empty(); // удаляем все дочерние узлы и содержимое у элементов <p>
        });
      });
    </script>
  </head>
  <body>
    <button>Клик</button>
    <p>Р<span>а</span>з</p>
    <p>Два</p>
    <p>Три</p>
  </body>
</html>

В этом примере с использованием jQuery метода .empty() мы удаляем все дочерние узлы и содержимое элементов <p> при нажатии на кнопку.

Пример использования jQuery метода .remove(): попробуйте сами

index.html
HTML
<button>Клик</button>
<p>Р<span>а</span>з</p>
<p>Два</p>
<p>Три</p>
main.js
JavaScript
$(document).ready(function () {
  $("button").click(function () {
    $("p").empty();
  });
});
style.css
CSS

p {
border: 1px solid green;	
}

Результат нашего примера:

Пример использования jQuery метода .empty()
Пример использования jQuery метода .empty()