Introduction with JQUERY - Remove and Empty Methods

Guest Posts Paolo Nikko Nuñal

In our previous tutorial we tackle about adding elements, we'll in this tutorial we are going to find out how to remove them using the remove( ) and empty ( ) methods in JQUERY.

remove () - Removes the chosen selected element including its child elements if it has any.

empty () - Removes the child elements from the selected element.

This is pretty useful if you want to remove some parts on your HTML document when a specific action is being done.

Using JQUERY remove() Method.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
       $("#remove").click(function(){
           $("#division").remove();
       });
    });
</script>
</head>
<body>
<div id="division style="height:100px;width:300px;border:1px solid black;background-color:red;"">
<p>The quick brown fox jumps over the lazy dog. What does the fox says? ring ding ding ding ring ring ring</p>
</div>
<br>
<button type="button" id="remove">Remove</button>
</body>
</html>


Based from the example above you can actually see, that when we click the "REMOVE" button the whole div, including the child elements inside are also removed.
Using JQUERY empty() Method.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
       $("#empty").click(function(){
           $("#division").empty();
       });
    });
</script>
</head>
<body>
<div id="division style="height:100px;width:300px;border:1px solid black;background-color:red;"">
<p>The quick brown fox jumps over the lazy dog. What does the fox says? ring ding ding ding ring ring ring</p>
</div>
<br>
<button type="button" id="empty">Empty</button>
</body>
</html>






Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here




Compared to the remove() method, the empty() method still retains the division but empties what inside of the container. You can actually see it as the content inside the div is remove but the "division" still remains..

Filtering Elements that you want to be Removed.

Using the remove() method, it also accepts one parameter, that allows you to "filter" which element that you wish to be removed. The parameter can be any of the JQUERY selector syntaxes that you wish. In the following example, we try to remove all <h1> elements that have a class name "header".

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
       $("#remove").click(function(){
           $("h1").remove(".header");
       });
    });
</script>
</head>
<body>
<h1>Header 1</h1>
<h1 class="header">Header 2</h1>
<h1 class="header">Header 3</h1>
</div>
<br>
<button id="remove" type="button">Remove H1 with class "header"</button>
</body>
</html>


From the code above, you actually remove all that have the class "header".
For more information you can check out by enrolling the course of Dr. Richard Stibbard.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here