jQuery Remove() and Empty() Functions with Examples

By: Suresh Dasari Mar 18, 2015

Introduction:

Here I will explain how to use jQuery empty() function and remove() function with examples. In jQuery both empty() and remove() functions are used to remove the elements. Empty() function in jQuery is used remove inside content of div element and remove() function is used to remove complete div element.

Description:

In previous articles I explained 8 best audio player plugin examples, jQuery video player plugin examples, jQuery Hover dropdown menu, jQuery bouncing menu example and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to use jQuery empty() function and remove() function with examples.

By using empty() function we can remove inside content of div element and remove() function will remove complete div element for that we need to write the code like as shown below

$(function () {

$('#btnEmpty').click(function () {

$('#pdiv').empty();

});

$('#btnRemove').click(function () {

$('#pdiv').remove();

});

})

</script>

If you want to check it in complete example you need to write the code like as shown below

<head>

<title>jQuery Empyt() and Remove() Functions Examples</title>

$(function () {

$('#btnEmpty').click(function () {

$('#pdiv').empty();

});

$('#btnRemove').click(function () {

$('#pdiv').remove();

});

})

</script>

</head>

<body>

<div style="border:1px solid green; padding:10px"> Sample Content Child Div</div>

</div><br />

</form>

</body>

</html>

Live Demo

For live demo try to click on Empty button and Remove button first empty button will remove inside div content and remove button will remove complete div

Sample Content Child Div