Удаление элементов можно выполнить с помощь следующих четырех методов:

  • empty(), 
  • remove(), 
  • detach(),
  • unwrap().

   Рассмотрим каждый из методов подробно. В конце каждого метода предлагается сделать не большое задание для закрепления материала.

Удаление элемента методом empty().

   Метод empty() — удаляет все внутренности соответствующему элементу. Элемент после обработки данным методом остается пустым. Рассмотрим на примере

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Удаляем все три параграфа
  $('.deleteNow').empty();
}
</script>
</head>
<body>
  <div class="deleteNow">
    <p>Текст-1</p>
    <p>Текст-2</p>
    <p>Текст-3</p>
  </div>
</body>
</html>

   После выполнения функции  delFunc(); удаляются все три параграфа (<p>Текст-1</p><p>Текст-2</p><p>Текст-3</p>) и получаем следующий код страницы.

<body>
  <div class="deleteNow">
  </div>
</body>

Удаление элемента методом remove().

   Метод remove() более мощный, он удаляет не только дочерние элементы внутри найденного, но и сам элемент. В этом его главное отличие от метода empty().

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Удаляем все три параграфа
  $('.deleteNow').remove();
}
</script>
</head>
<body>
  <div class="deleteNow">
    <p>Текст-1</p>
    <p>Текст-2</p>
    <p>Текст-3</p>
  </div>
</body>
</html>

   При выполнении функции delFunc();  получим следующий результат:

<body>
</body>

Удаление элемента методом detach().

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

Метод remove() удаляет события безвозвратно. 

<!DOCTYPE html>
<head>
<style>
p.alarm { 
	background-color: orange; 
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Устанавливаем событие click параграфу testDiv
  // Добавляем класс alarm при его отсутствии и удаляем класс alarm, 
  // если он уже есть у элемента
  $("#testDiv>p").click( function() {$(this).toggleClass("alarm");} );
  
  // Удаляем и восстанавливаем параграф #testDiv
  var test = $('#testDiv>p').detach();
      test.appendTo('#testDiv');
}
</script>
</head>
<body>
  <div id="testDiv">
    <p>Text-1</p>
  </div>
</body>

   В пример мы сначала методом .detach(); удалили элемент и событие click, к нему привязанное, а методом appendTo(); восстановили. Проведите эксперимент — замените .detach() на remove(). Можно ли будет по клику на параграф менять ему класс?

Удаление элемента методом unwrap().

   Метод unwrap(); используется для удаления родительского элемента. Wrap — переводиться как обертка, то есть удаляем элемент, который обертывает наш выбранный элемент. На примере все сразу же понятно.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Удаляем элемент #mywrap, но сохраняем его содержимое
  $('#mytext').unwrap();
}
</script>
</head>
<body>
  <div id="mywrap">
    <p id="mytext">Text-0</p>
    <p>Text-1</p>
    <p>Text-2</p>
    <p>Text-3</p>
  </div>
</body>
</html>

   Результирующий код страницы таков:

<body>
    <p id="mytext">Text-0</p>
    <p>Text-1</p>
    <p>Text-2</p>
    <p>Text-3</p>
</body>

А теперь не большой тест.

1. Сколько методов удаления элементов вы узнали?

 
 
 
 

2. Чем отличается метод detach() от remove() ?

 
 
 
 

3. unwrap() — как переводиться wrap?

 
 
 
 

4. Метод appendTo() выполняет:

 
 
 
 

5. Метод remove() удаляет:

 
 
 
 

Вопрос 1 из 5

Спасибо за прочтение статьи! Надеюсь, где-то пригодится!