Removing items can be done using the following four methods:

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

   Consider each of the methods in detail. At the end of each method it is proposed to do a small task to fix the material.

Deleting an element with the empty() method.

   The method empty() – removes all the insides of the corresponding element. The element after processing by this method remains empty. Consider an example.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Delete all three paragraphs
  $('.deleteNow').empty();
}
</script>
</head>
<body>
  <div class="deleteNow">
    <p>Text-1</p>
    <p>Text-2</p>
    <p>Text-3</p>
  </div>
</body>
</html>

   After executing the delFunc() function; all three paragraphs are deleted (<p> Text-1 </ p> <p> Text-2 </ p> <p> Text-3 </ p>) and we get the following page code.

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

Remove an element using the remove() method.

   The remove() method is more powerful; it removes not only the child elements inside the found one, but also the element itself. This is its main difference from the empty() method.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Delete all three paragraphs.
  $('.deleteNow').remove();
}
</script>
</head>
<body>
  <div class="deleteNow">
    <p>Text-1</p>
    <p>Text-2</p>
    <p>Text-3</p>
  </div>
</body>
</html>

   When executing the delFunc() function; we get the following result:

<body>
</body>

Deleting an item with the detach() method.

   In jQuery, deleting an element is done using the detach () method in cases where the element to be deleted is planned to be restored. When using this method, all events associated with the deleted element can also be fully restored. The remove() method removes events permanently.

<!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() {
  // Set the click event to the testDiv paragraph
  // Add the alarm class when it is missing and delete the alarm class, 
  // if the item already has it
  $("#testDiv>p").click( function() {$(this).toggleClass("alarm");} );
   
  // Delete and restore the #testDiv paragraph
  var test = $('#testDiv>p').detach();
      test.appendTo('#testDiv');
}
</script>
</head>
<body>
  <div id="testDiv">
    <p>Text-1</p>
  </div>
</body>

   In the example, we first use the .detach() method; deleted the element and the click event attached to it, and using the appendTo() method; restored. Conduct an experiment – replace .detach() with remove(). Will it be possible to change his class by clicking on a paragraph?

Deleting an element with the unwrap() method.

   Unwrap() method; used to remove the parent element. Wrap – translated as a wrapper (cover), that is, delete the element that wraps our selected element. In the example, everything is immediately clear.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Remove the #mywrap element, but save its contents
  $('#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>

   The resulting page code is:

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

   And now is not a big test.

1. How many removal methods have you learned?

 
 
 
 

2. What is the difference between the detach() method and remove() ?

 
 
 
 

3. unwrap () – how is wrap translated?

 
 
 
 

4. The appendTo () method performs:

 
 
 
 

5. The remove() method removes:

 
 
 
 

Question 1 of 5

   Thanks for reading the article! I hope somewhere useful!